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

 この記事は約2分で読めます。
プログラミング
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");
        }
    }
}
これで子コンポーネントのメソッドを呼ぶことができます。

参考サイト

[blogcard url=”https://qiita.com/beargng/items/218d8e98ddb8bb5a9674″]
[blogcard url=”https://qiita.com/gigazombie/items/6f53a1de17c370787eac”]
 

おわりに

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

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

 

       
   
コメントはまだありません

コメントを残す

jsファイルかvue呼び出す
Laravel
【最終手段】PHPでTwitterOauthを使ってTwitterに画像のアップロードをする方法

こんにちは、 私は、LaravelとVueでWebアプリを作成していますが TwitterOauth …

jsファイルかvue呼び出す
Vue
Vuejsで要素を画像に変更する方法!「html2canvas」を使用!

こんにちは、 Vue.jsでdivなどの要素をシェアさせたいと思い、 実際にやってみたら、かなり簡単 …

jsファイルかvue呼び出す
Vue
外部JavaScriptファイルからVueファイルのメソッド呼び出す方法!

こんにちは、 久しぶりのVue記事です。 今回は、外部のJavaScriptファイルから Vueファ …