【Vue.js】v-forの中でrefを使う($refsの指定方法)

投稿者: | 2018年12月12日

Vue.jsのref便利ですよね。親コンポーネントから子コンポーネントの値や関数を使うことができます。今回、v-forを使って繰り返し処理で動的に生成したコンポーネントをrefで操作しようとしてけっこう悩みました。これが正解とは思えないやり方なのですが、とりあえず動いたのでご紹介したいと思います。

ポイント

<template>
<hello-child :ref="id" :child="child" v-for="(child,id) in children" :key="id"></hello-child>
</template>
<script>
this.$refs[id]['0'].functionname(param)
</script>

こんな感じ!

・v-forを使ってループ処理で子コンポーネントを生成。

・その際にrefをid(連番)で自動設定。(:ref=”‘name_’+id” とかにしてもOK)

・子コンポーネントの参照に、this.$refs[id][‘0’].functionnameを指定。

※$refs[id]までは通常の参照方法。v-forを使った場合、なぜか[‘0’]の指定を追加する必要がある。・・・バグ?

 

以下は参考までに、サンプルプログラムを記載しておきます。コピペして試していただければと!

親(this.refsの参照方法がポイント!)

<template>
<div class="hello">
<h1>Hello Vue.js</h1>
<v-text-field label="message" solo v-model="message"></v-text-field>
<v-btn @click="onclick(id)" v-for="(child,id) in children" :key="id">{{child.name}}</v-btn>
<div v-for="(child,id) in children" :key="id">
<hello-child :ref="id" :child="child"></hello-child>
</div>
</div>
</template>
<script>
import HelloChild from './HelloChild.vue'
export default {
name: 'HelloWorld',
data () {
return {
message: '',
children: [
{name: 'taro'},
{name: 'ziro'},
{name: 'goro'},
{name: 'hanako'},
{name: 'yuki'},
{name: 'kame'}
]
}
},
methods: {
onclick (id) {
console.log(this.$refs[id])
console.log(this.$refs[id]['0'].message)
this.$refs[id]['0'].messageFromParent(this.message)
}
},
components: {
HelloChild
}
}
</script>

 

子(とくに変わった設定はなし!)

<template>
<div class="helloChild">
<h2>{{child.name}}</h2>
<p>{{message}}</p>
<p>
<v-text-field label="message" solo v-model="text"></v-text-field>
<v-btn @click="onclick">change</v-btn>
</p>
</div>
</template>
<script>
export default {
name: 'HelloChild',
props: {
child: Object
},
data () {
return {
message: 'please edit',
text: ''
}
},
methods: {
onclick () {
this.message = this.text
},
messageFromParent (text) {
this.message = text
}
}
}
</script>

 


カツオが開発したWebサービスです。

平成の想い出を気軽に年表にしてシェアすることができるサービスです。ぜひ使ってみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です