Nuxt.js 子コンポーネントから親コンポーネントのdataを変更する方法

Question

子コンポーネントから親コンポーネントの値を変更させようとしているのですが、下記のsetTemplate(template)メソッドで値の変更を行なっているのですが、下記のエラーが出てしまいます。

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. 
Instead, use a data or computed property based on the prop's value. 
Prop being mutated: "template"

調べてみると子コンポーネントからpropsをいじるなとエラーがでているそうです。
親コンポーネント側のデータも変更が行われていないので、何か方法あれば教えていただいたです。

試して見た事

  mounted: function() {
     let template_data = this.template
  }

//テンプレートをセットするメソッド
    setTemplate(template) {
      this.template_data = template
    }

失敗：親コンポーネント側の値が変化せず。

  data() {
    return {
      template_data: this.template,
    }
  },
//テンプレートをセットするメソッド
    setTemplate(template) {
      this.template_data = template
    }

失敗：同じく親コンポーネント側の値が変化せず。

<template>
  <div>
    <div v-for="template in templates">
      <el-button :style="{
        width: template.width / 3 + 'px',
        height: template.height / 3 + 'px',
        border: 'solid 1px',
        position: 'relative',
        float: 'left',
        'vertical-align': 'middle',
        margin: '10px',
      }"
        @click="setTemplate(template)"
      >
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    template: {
      type: Object,
      default: () => ({
        width: '',
        height: '',
        layers: [],
      }),
    },
  },
  components: {},
  data() {
    return {
      templates: this.replaceTemplates(),
    }
  },
  mounted: function() {
    let template_data = this.template
  },
  methods: {
    getTemplates() {
      let templates = [
        {
          id: 1,
          width: 300,
          height: 400,
          layers: [
            { type: 'logo', width: 50, height: 50, x_position: 10, y_position: 10, z_index: 1 },
            { type: 'image', width: 300, height: 200, x_position: 0, y_position: 80, z_index: 0 },
          ],
        },
        {
          id: 1,
          width: 400,
          height: 500,
          layers: [
            { type: 'logo', width: 20, height: 50, x_position: 10, y_position: 100, z_index: 1 },
            { type: 'image', width: 400, height: 50, x_position: 0, y_position: 250, z_index: 0 },
            { type: 'text', width: 40, height: 10, x_position: 50, y_position: 10, z_index: 2 },
            { type: 'text', width: 10, height: 10, x_position: 150, y_position: 200, z_index: 2 },
          ],
        },
      ]
      let response = JSON.stringify(templates)
      return JSON.parse(response)
    },

    setTemplate(template) {
      this.template_data = template
    }

  },
}
</script>

Answer 1

v-model 使いましょう。詳細については省きますが、v-model に関しては公式ドキュメントが分かりづらいので Qiita などで適当に調べてみると良いですよ。

以下、親と子コンポーネントのサンプルコードです。

<template>
  <div class="Parent">
    <child v-model="template" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      template: ''
    }
  }
}
</script>

export default {
  model: {
    prop: 'template',
    event: 'change'
  },

  props: {
    template: {
      type: Object,
      default: () => ({
        width: '',
        height: '',
        layers: [],
      }),
    },
  },

  // 中略

  methods: {
    changeTemplate(template) {
      this.$emit('change', template)
    }
  }
}