如何使用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

由于不能保证数组引用保持原始顺序，因此我发现在父对象上注册引用比较有用，然后使用常规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

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

  

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

因此要“在循环的一个迭代中访问特定元素” ，您将使用类似的

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

Answer 3

您可以尝试以下方法：

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