如何使用 ref 访问 v-for 循环中的元素

Question

尽可能简单地说：

我有一个 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);
 }

Answer 1

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

模板

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

JavaScript

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

Answer 2

你可以试试这个：

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

Answer 3

v-for循环中的 Refs 成为数组，每个元素都位于文档中出现的索引处。这里介绍~https://v2.vuejs.org/v2/api/#ref

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

因此，要"访问循环迭代之一中的特定元素"，您可以使用类似

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