ユーザ用ツール

サイト用ツール


dialy:vuerefinvfor

Vue の v-for の中の要素に ref を設定する

Vue の v-for でループしている要素に ref を設定する必要があって、

<div v-for="item in list" :key="item.id">
  <div :ref="'element' + item.id">...</div>
  ... $refs['element' + item.id] を参照する処理 ...
</div>

のように動的に設定してみたのですが、うまくいきません。エラーなどは出ないのですが、明らかに参照できていません。

ループしてないところであればたいてい静的な値を設定すればいいのですが、ループの中はそれではダメだろう。 でも、こんなこと、誰でも普通に必要になるよね? と解決策を探してみたらありました。解決策というか、何もしなくても勝手に配列になってくれるそうな。 たぶん、私が Vue のお勉強で基本的なことを端折って勝手にハマっただけです。

How to add dynamic ref in vue.js?

Answer 9. You have dynamic refs and have multiple elements. To target any single node just pass the index within method params

<div v-for="(item, index) in list" :key="item.id">
  <div ref="element">...</div>
  ... $refs.element[index] を参照する処理 ...
</div>
このウェブサイトはクッキーを使用しています。 Webサイトを使用することで、あなたはあなたのコンピュータにクッキーを保存することに同意します。 また、あなたはあなたが私たちのプライバシーポリシーを読んで理解したことを認めます。 同意しない場合はウェブサイトを離れてください。クッキーに関する詳細情報
dialy/vuerefinvfor.txt · 最終更新: 2020/06/24 20:35 by michinobu