Vue3中获取列表中的DOM元素（搬运）

zzcchunter

已于 2024-01-22 15:57:14 修改

阅读量89

点赞数

文章标签： vue3

于 2024-01-22 15:55:38 首次发布

原文链接：https://stackoverflow.com/questions/61155893/how-to-access-dynamic-ref-tagged-html-elements-in-vue-js-3

版权

本文介绍了如何在Vue.js3的setup函数中处理动态生成的ref元素，包括使用`ref`和`reactive`，以及在每次更新前重置ref数组的方法。

摘要由CSDN通过智能技术生成

vuejs3 - How to access dynamic ref-tagged html elements in Vue.js 3? - Stack Overflow

<template>
  <div v-for="(item, i) in list" :ref="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([])

      // make sure to reset the refs before each update
      onBeforeUpdate(() => {
        divs.value = []
      })

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