frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

Vue error "Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders"の対策

スポンサードリンク


スポンサードリンク


下記のようなエラーが出ました。

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: "property"

found in

以下にて解消しました。

パターン1

<input class="form-check-input" type="checkbox" id="property" v-model="property" v-bind:checked="property" v-on:change="$emit('propertyChanged')">

↓v-modelを削除

<input class="form-check-input" type="checkbox" id="property" v-bind:checked="property" v-on:change="$emit('propertyChanged')">

パターン2

<input class="form-control" type="number" id="property" v-bind:value="property" min="0" max="30" v-on:change="$emit('propertyChanged')">

↓emitの引数を指定
子コンポーネント

<input class="form-control" type="number" id="property" v-bind:value="property" min="0" max="30" v-on:change="$emit('propertyChanged', parseInt($event.target.value))">

親コンポーネント

    <components v-on:propertyChanged="propertyChanged"
    ></components>
export default {
 ~略~
  methods: {
    propertyChanged: function (val) {
      this.property= val;
    }

  }