「Vue.js」でv-for内のrefにアクセスする方法！子コンポーネントのメソッドを使う

Vue.jsにて子コンポーネントのメソッドやデータにアクセスをする際
refを使用すると簡単にできます。

しかし、v-for内から子コンポーネントにアクセスする方法は
少しだけ書き方が変わります。

v-for文内の書き方

親コンポーネント.vue

[javascript]
export default{
methods:{
call_child(ref){
this.$refs[ref][0].child_method();
}
}
}
[/javascript]

子コンポーネント.vue

[javascript]
export default{
methods:{
child_method(){
console.log(“HELLO”);
}
}
}
[/javascript]

これで子コンポーネントのメソッドを呼ぶことができます。

参考サイト

Vue.jsで動的にrefにアクセスする方法 - Qiita

#refに変数を使いたいtemplateにはv-bindディレクティブを使ってv-bind:refや:refと書けばいいことは分かるけど、それに対してscriptでどうアクセスするか分からなくて少…

qiita.com

v-for内の子コンポーネントのメソッドを親から$refsで呼ぶときにエラーが出てしまうときの対処法 - Qiita

###やりたいことv-forの中で子コンポーネントを複数作る親コンポーネントからそれぞれの子コンポーネントのメソッドを呼びたい###前提親コンポーネントから子コンポーネントのメソッドを呼びた…

qiita.com

おわりに

通常の方法は参考サイトがたくさんあるのですが、
v-forで回したときの呼び出し方は参考サイトが少なく
上記の参考サイトに助けられました(^ ^)

ありがとうございました。