VueJS: читать содержимое div по его идентификатору

Question

В моем первом примере я имею в шаблоне моего компонента:

<div id="hello">hello world</div>

Когда console.log(this.$refs['hello']) вызывается в myMethod(), я получаю undefined в консоли.

Во втором примере у меня есть:

<div v-for="item in data">
  <div :id="'hello-'+item.id">hello {{ item.id }}</div>
</div>

Когда console.log(this.$refs['hello-1']) вызывается в myMethod(), я также получаю undefined в консоли.

Что не так в моем коде?

Answer 1

Вы не можете получить элемент с refs, указав этот элемент id. Вы должны связать ref с этим элементом. Вот пример:

<div v-for="item in data" :key="item.id">
  <div :id="'hello-'+item.id" :ref="'hello-'+item.id">hello {{ item.id }}</div>
</div>

А также не забудьте связать ключ со своими итерационными элементами с помощью v-for