如何使用 ref 访问 v-for 循环内的元素答案

【问题标题】：How to access an element inside a v-for loop using ref如何使用 ref 访问 v-for 循环内的元素
【发布时间】：2019-06-02 17:07:21
【问题描述】：

尽可能简单地说：

我有一个 v-for 循环。我想访问循环迭代之一中的特定元素。由于某些原因，我只能使用 ref 来做到这一点。有没有办法做到这一点？

我尝试了各种不同的方法来实现这一点，但它总是返回未定义。我的代码在 v-for 循环之外运行良好。

vue 的文档没有涵盖这个实例。

循环简化：

  <div v-for="(item, i) in items">
    <div ref="card"></div>
  </div>

方法

 doThing() {
   card = elements.create('card');
   card.mount(this.$refs.card);
 }

任何帮助将不胜感激。

【问题讨论】：

【解决方案1】：

v-for 循环中的引用变成数组，每个元素都位于它出现在文档中的索引处。就说到这里了~https://vuejs.org/v2/api/#ref

当用于带有v-for 的元素/组件时，注册的引用将是一个包含 DOM 节点或组件实例的数组。

所以要“访问循环的迭代之一中的特定元素”，您可以使用类似

card.mount(this.$refs.card[someIndex])

【讨论】：

不幸的是，该 ref 数组中的顺序不能保证与数据数组中的元素的顺序相同。这使得数组引用毫无用处:(
@JosephSilber 是的，但 OP 没有说明他们想要引用哪个特定元素。也许它是 any 元素？
谢谢，伙计们。我确实需要访问特定元素。是否可以将 refs 作为对象（使用 v-for="(item, key, index) in items" ）？然后使用key获取具体的元素？

【解决方案2】：

由于数组 ref 不能保证按原始顺序排列，我发现在父级上注册一个 ref 更有帮助，然后使用常规 DOM API 来查找您想要的元素。

<div ref="cards">
    <div v-for="(item, i) in items">
        <!-- this is a card -->
    </div>
</div>

{
    methods: {
        getCardAt(index) {
            return this.$refs.cards.children[index];
        }
    }
}

【讨论】：

【解决方案3】：

你可以试试这个：

<div v-for="(item, i) in items">
    <div :ref="`card-${i}`"></div>
</div>

【讨论】：