ps:之前的 vue2 中的 v-for 循环动态绑定 ref 的用法(可使用 $refs 获取节点数组)在 vue3 中不再支持

以下为 vue3 中的用法

v-for 中使用

组合式 API 模板引用在 v-for 内部使用时没有特殊处理。相反,请使用函数引用执行自定义处理:


<template>
  <div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }">
    {{ item }}
  </div>
</template>

<script>
  import { ref, reactive, onBeforeUpdate } from 'vue'

  export default {
    setup() {
      const list = reactive([1, 2, 3])
      const divs = ref([])

      // 确保在每次更新之前重置ref
      onBeforeUpdate(() => {
        divs.value = []
      })

      return {
        list,
        divs
      }
    }
  }
</script>

最后附上vue模板引用官方说明

最后修改:2021 年 06 月 04 日
如果觉得我的文章对你有用,请随意赞赏或留下你的评论~