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

プログラミング Vue

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

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

v-for文内の書き方

親コンポーネント.vue

[html]

<template>

<div v-for="(item,index) in items" :key="index">
<button @click="call_child(‘child’ + index)">子コンポーネントのメソッド呼び出すボタン</button>
<child1 :ref="’child’ + index"></child1>
</div>

</template>
[/html]

[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でどうアクセスするか分からなくて少しスタックしたのでメモ。 公式...
v-for内の子コンポーネントのメソッドを親から$refsで呼ぶときにエラーが出てしまうときの対処法 - Qiita
やりたいこと v-forの中で子コンポーネントを複数作る 親コンポーネントからそれぞれの子コンポーネントのメソッドを呼びたい 前提 親コンポーネントから子コンポーネントのメソッドを呼びたい時、$refsを使えば可能です...

 

おわりに

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

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

コメント

タイトルとURLをコピーしました