Javascript v-for循环中的Vue.js ref

我尝试使用

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(() => this.$refs.item2.highlight(), 1500);
        }
    };
</script>

它只是渲染一些列表项，并在一秒半后高亮显示其中一项。但是我得到了一个错误：

uncaughttypeerror:_this.$refs.item2.highlight不是一个函数

调试之后，我发现了一个有趣的事实：在

v-for

循环中定义的ref不是一个组件，而是一个组件的数组。
什么是逻辑，什么是f包装器？有人见过这个案子吗？有人能解释一下这种行为吗？
上面给出的代码可以与setTimeout（（）=>this.$refs.item2[0].highlight（），1500）配合使用

---

我必须始终通过

[0]

？有没有更好的办法？请提供帮助。

考虑您的主要问题：

文件说：

当ref与v-for一起使用时，您得到的ref将是一个包含镜像数据源的子组件的数组

但是，我想说你做得不对，因为使用

refs

不是一个好方法。我们在

vue

-land中有非常有用的替代方案。例如，可以使用

道具

这就是代码的重写版本的外观：

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

<script>
    import ListItem from "./ListItem";
    export default {
        name: "HelloWorld",
        components: {
            ListItem
        },
        data() {
            return {
                msg: "Welcome to Your Vue.js App",
                items: [
                    // We have moved `isHighlighed` falg into the data array:
                    { id: 1, text: "foo", isHighlighed: false },
                    { id: 2, text: "bar", isHighlighed: true },
                    { id: 3, text: "baz", isHighlighed: false },
                    { id: 4, text: "foobar", isHighlighed: false }
                ]
            };
        };
    };
</script>

这会解决你的问题。
我也遇到过同样的问题

如SooLevon所提到的，<代码> $ REF.{REF No.}/COD>是一个数组，用于参考文献中，所以我的解决方案是考虑<代码> $ REF.{REF No.}/COD>是一个只有缺省的一个项的数组，并且写“代码> $ REF.{REF No.}。
它适用于我的情况。
将refs与v-for一起使用时，组件/DOM节点作为数组直接存储到变量名，因此不需要在ref名中使用索引号。所以你可以这样做：

<list-item
  v-for="item in items" 
  :key="item.id" 
  :value="item.text" 
  ref="items"
/>

还要注意的是，参考文献可能不符合规定，需要以完全不同的方式进行处理。您可以这样做：
我试图通过从方法传递索引来处理v-for中的引用：

<div v-for="(item, index) in items" @click="toggle(index)">
  <p ref="someRef"></p>
</div>

toggle(index) {
  this.refs['someRef'][index].toggle();
}

对于Vue 3用户：

在Vue 3中，这种用法将不再自动在
$refs
中创建数组。要从单个绑定中检索多个引用，请将
ref
绑定到提供更大灵活性的函数（这是一项新功能）：

HTML

使用合成API：

import { onBeforeUpdate, onUpdated } from 'vue'

export default {
  setup() {
    let itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    onUpdated(() => {
      console.log(itemRefs)
    })
    return {
      setItemRef
    }
  }
}

这里是文档链接：
我通过使用动态ref:
：ref=“'myRef'+index”
解决了订购问题

如果执行此操作，Vue将为v-for中的每个项目创建一个新数组，其中唯一的元素始终是所需的ref。然后，您可以使用
this.$refs['myRef'+index][0]
访问它

（这在Vue 3中不起作用。）
当ref与v-for一起使用时，您得到的ref将是一个包含镜像数据源的子组件的数组。
-是吗？我需要调用子组件的方法，我无法提供实际项目的代码。事实上，您不需要在
v-for
循环中为
ref
创建索引。如何将其用于合成api？此方法将在vue3中使用。因此，如果您使用的是vue3或更高版本，我会避免这种情况——这是一个天才的解决方案。谢谢
this.$refs.items[index]

<div v-for="(item, index) in items" @click="toggle(index)">
  <p ref="someRef"></p>
</div>

toggle(index) {
  this.refs['someRef'][index].toggle();
}

<div v-for="(item, index) in items" @click="toggle(index)">
  <p ref="someRef" :data-key="index"></p>
</div>

toggle(index) {
  const dropdown = this.$refs['someRef'].find(
        el => el.$attrs['data-key'] === index
    );
  dropdown.toggle();
}

<div v-for="item in list" :ref="setItemRef"></div>

export default {
  data() {
    return {
      itemRefs: []
    }
  },
  methods: {
    setItemRef(el) {
      if (el) {
        this.itemRefs.push(el)
      }
    }
  },
  beforeUpdate() {
    this.itemRefs = []
  },
  updated() {
    console.log(this.itemRefs)
  }
}

import { onBeforeUpdate, onUpdated } from 'vue'

export default {
  setup() {
    let itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    onUpdated(() => {
      console.log(itemRefs)
    })
    return {
      setItemRef
    }
  }
}