vue3 v-for 和 ref 同时使用的问题

原文链接: vue3 v-for 和 ref 同时使用的问题

上一篇: vue3 FLIP 动画实现

下一篇: vite 提交PR 支持CJS引入 [已经被拒了]

https://composition-api.vuejs.org/api.html#ref

使用v-for 循环时, 使用ref总会获取到的是最后的元素, 必须使用函数, 手动赋值,

不能用push, 会在更新的时候造成bug, 元素会重复

  <div v-for="(s,i) in stus" :ref="el => domList2[i]=el">{{s}}</div>

<template>
  <div v-for="s in stus" ref="domList1">{{s}}</div>
  <div v-for="(s,i) in stus" :ref="el => domList2[i]=el">{{s}}</div>
</template>

<script>
  import {ref,nextTick} from 'vue'
  export default {
    name: 'VFor',
    setup() {
      const stus = ref(['a', 'b', 'c', 'd'])
      const domList1 = ref([])
      const domList2 = ref([])

      nextTick(() => {
        console.log('domList1', domList1.value)
        console.log('domList2', domList2.value)
      })
      return {
        stus,
        domList1,
        domList2
      }
    }
  }
</script>