Vue.js / Nuxt.js

【Nuxt.js】子コンポーネントから親コンポーネントのmodelを更新する

ふぐ

Nuxt.jsで、入れ子構造のコンポーネントでmodelの更新に詰まったのでメモ

ポイント

  • modelを直接変更すると怒られる
  • computed::modelの変更はset関数で拾えるので、
    computedを介して親に変更を伝える

親コンポーネント

<template>
  <child-input type="text" v-model="name" />
</template>
<script>
import ChildInput from '~/components/ChildInput'
export default {
  components: {
    ChildInput,
  },
  data() {
    return {
      name: 'yamada'
    }
 }
}
</script>

ここで子コンポーネントに渡したnameの更新を親コンポーネントに反映したい

子コンポーネント

<template>
  <input type="text" v-model="computedModel" />
</template>
<script>
export default {
  // modelの設定を行う
  model: {
    prop: 'parentModel', //　親モデルの値を'parentModel'というkeyで受け取る
    event: 'input' // イベント種別
  },
  props: {
    parentModel: String // 親モデルの値が入ってくるので、型を指定してあげる
  },
  computed: {
    computedModel: {
      get () {
        // propsで受け取った親モデルの値をcomputedModelに反映する
        return this.parentModel
      },
      set (value) {
        // computedModelの値が変更された際はここに入ってくる
        // $emitで親コンポーネントのmodelに反映する
        this.$emit('input', value)
      }
    }
  }
}
</script>

\ 案件のご依頼・ご相談はこちらから /