相关疑难解决方法(0)

我尝试在v-for循环内使用组件，并初始化ref以便将来从父级访问这些组件的某些方法。这是我的情况的简化代码：

<template>
    <div class="hello">
        {{ msg }}
        <ul>
            <list-item 
                v-for="item in items" 
                :key="item.id" 
                :value="item.text" 
                :ref="`item${item.id}`"
            />
        </ul>
    </div>
</template>

<script>
    import ListItem from "./ListItem";
    export default {
        name: "HelloWorld",
        components: {
            ListItem
        },
        data() {
            return {
                msg: "Welcome to Your Vue.js App",
                items: [
                    { id: 1, text: "foo" },
                    { id: 2, text: "bar" },
                    { id: 3, text: "baz" },
                    { id: 4, text: "foobar" }
                ]
            };
        },
        mounted() {
            setTimeout(() => …

我正在阅读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>