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]
これで子コンポーネントのメソッドを呼ぶことができます。
参考サイト
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VnVlLmpzJUUzJTgxJUE3JUU1JThCJTk1JUU3JTlBJTg0JUUzJTgxJUFCcmVmJUUzJTgxJUFCJUUzJTgyJUEyJUUzJTgyJUFGJUUzJTgyJUJCJUUzJTgyJUI5JUUzJTgxJTk5JUUzJTgyJThCJUU2JTk2JUI5JUU2JUIzJTk1JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yZjMxZWQ0ODZmZGVkMmQ5NGEyMjk0MzlkNTE0YTk0Zg&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzbG93bW8mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTdhYThhMWZlZThhMjRkMDUyMjk0YmM3ZWYyY2RlNWJk&blend-x=142&blend-y=486&blend-mode=normal&s=287b60ab07320db46c9a1c5f7dedc4da)
Vue.jsで動的にrefにアクセスする方法 - Qiita
#refに変数を使いたいtemplateにはv-bindディレクティブを使ってv-bind:refや:refと書けばいいことは分かるけど、それに対してscriptでどうアクセスするか分からなくて少…
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9di1mb3IlRTUlODYlODUlRTMlODElQUUlRTUlQUQlOTAlRTMlODIlQjMlRTMlODMlQjMlRTMlODMlOUQlRTMlODMlQkMlRTMlODMlOEQlRTMlODMlQjMlRTMlODMlODglRTMlODElQUUlRTMlODMlQTElRTMlODIlQkQlRTMlODMlODMlRTMlODMlODklRTMlODIlOTIlRTglQTYlQUElRTMlODElOEIlRTMlODIlODklMjRyZWZzJUUzJTgxJUE3JUU1JTkxJUJDJUUzJTgxJUI2JUUzJTgxJUE4JUUzJTgxJThEJUUzJTgxJUFCJUUzJTgyJUE4JUUzJTgzJUE5JUUzJTgzJUJDJUUzJTgxJThDJUU1JTg3JUJBJUUzJTgxJUE2JUUzJTgxJTk3JUUzJTgxJUJFJUUzJTgxJTg2JUUzJTgxJUE4JUUzJTgxJThEJUUzJTgxJUFFJUU1JUFGJUJFJUU1JTg3JUE2JUU2JUIzJTk1JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yNjMwZmQyOTdlNzkzMDhmODQ2ODczZjczMTNkMGYxYQ&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBnaWdhem9tYmllJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00MDdiOTQ1MWFhNWU4OTY0M2UxNTNhMGIxNGEyZmNhNg&blend-x=142&blend-y=486&blend-mode=normal&s=3e67b18401aa5e5416c4f390b9cf1d8d)
v-for内の子コンポーネントのメソッドを親から$refsで呼ぶときにエラーが出てしまうときの対処法 - Qiita
###やりたいことv-forの中で子コンポーネントを複数作る親コンポーネントからそれぞれの子コンポーネントのメソッドを呼びたい###前提親コンポーネントから子コンポーネントのメソッドを呼びた…
おわりに
通常の方法は参考サイトがたくさんあるのですが、
v-forで回したときの呼び出し方は参考サイトが少なく
上記の参考サイトに助けられました(^ ^)
ありがとうございました。
コメント