【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サービスです。

「セールサーチ」ネットショップのセール情報の検索サイト!

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

コメントを残す

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