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

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

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

v-for文内の書き方

親コンポーネント.vue
<template>

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

</template>

export default{
    methods:{
        call_child(ref){
             this.$refs[ref][0].child_method();
        }
    }
}
子コンポーネント.vue
export default{
    methods:{
        child_method(){
            console.log("HELLO");
        }
    }
}
これで子コンポーネントのメソッドを呼ぶことができます。

参考サイト



 

おわりに

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

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

 

コメント

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