vue.js v3.2.25或更高版本的v-for循环中的引用

j5fpnvbx 于 2023-03-24 发布在 Vue.js

关注(0)|答案(1)|浏览(162)

我正在阅读vue 3的文档，我决定在我的本地开发环境中测试refs。我使用的是vue版本3.2.31，并根据vue官方指南设置了我的项目。所以为了测试我的组件中的“refs”，我只是复制并粘贴了这个url中的代码，即vue站点的Playground。这意味着我的组件代码是这样的：

<script setup>
import { ref, onMounted } from 'vue'

const list = ref([1, 2, 3])

const itemRefs = ref([])

onMounted(() => {
  console.log(itemRefs.value.map(i => i.textContent))
})
</script>

<template>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

但是在控制台中我收到一个空数组。我是否错过了一些事情来查看li标签中的文本输出数组？

vue.js

来源：https://stackoverflow.com/questions/71414977/refs-inside-v-for-loop-for-vue-v3-2-25-or-above

1条答案

按热度按时间

f3temu5u1#

这是一个已知的错误（vuejs/core#5525），其中数组引用未正确填充。
一种解决方法是绑定一个函数，将模板引用推入数组：

<template>
  <ul>                              👇
    <li v-for="item in list" :ref="el => itemRefs.push(el)">
      {{ item }}
    </li>
  </ul>
</template>

demo 1
或者通过 Package 器对象绑定ref数组（如原始问题中所建议的）：

<script setup>
import { ref, onMounted } from 'vue'

const list = ref([1, 2, 3])

const itemRefs = ref([])
          👇
const skipUnwrap = { itemRefs }

onMounted(() => {
  console.log(itemRefs.value.map(i => i.textContent))
})
</script>

<template>
  <ul>                                 👇
    <li v-for="item in list" :ref="skipUnwrap.itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

demo 2

赞(0）回复(0）举报 2023-03-24

我来回答

vue.js v3.2.25或更高版本的v-for循环中的引用

1条答案

相关问题

热门标签

最新问答