v-for Loop 内的参考文献 vue v3.2.25 或更高版本

Question

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

<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？

Answer 1

这是一个已知的错误 ( vuejs/core#5525)，其中数组引用未正确填充。

一种解决方法是绑定一个函数，将模板引用推送到数组中：

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

演示1

或者通过包装对象绑定 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>

演示2