Как получить доступ к элементу внутри цикла v-for, используя ref - PullRequest
Новая
       24

Как получить доступ к элементу внутри цикла v-for, используя ref

0 голосов
/ 08 января 2019

Проще говоря:

У меня есть петля v-for. Я хотел бы получить доступ к конкретному элементу внутри одной из итераций цикла. По причинам, я могу сделать это только с помощью ссылки. Есть ли способ сделать это?

Я пробовал разные способы достижения этого, но он всегда возвращает неопределенное значение. Мой код отлично работает вне цикла 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);
 }

Любая помощь будет очень признательна.

Ответы [ 3 ]

0 голосов
/ 08 января 2019

Поскольку ссылки на массивы не гарантируются в исходном порядке, я считаю более полезным зарегистрировать ссылку на родителя, а затем использовать обычный DOM API для поиска нужного элемента.

Template 

<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];
        }
    }
}
0 голосов
/ 08 января 2019

Вы можете попробовать это: 

<div v-for="(item, i) in items">
    <div :ref="`card-${i}`"></div>
</div>
0 голосов
/ 08 января 2019

Ссылки в цикле v-for становятся массивами с каждым элементом в индексе, который появляется в документе. Это покрыто здесь ~ https://vuejs.org/v2/api/#ref

При использовании для элементов / компонентов с v-for зарегистрированной ссылкой будет массив, содержащий узлы DOM или экземпляры компонентов.

Таким образом, чтобы "получить доступ к определенному элементу внутри одной из итераций цикла" , вы должны использовать что-то вроде 

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