【学習記録】プロパティの値を変更すると警告(Vue warn)が発生する

タイトル通り、本記事はプロパティの値を変更した際に警告(Vue warn)が発生した際の原因と対処方法を記載していきます。

はじめに

業務でVue.jsをデータバインディング程度に使用していましたが、本格的（コンポーネント化、親子でのデータ通信など）に使用するようになりました。

ってことで、Udemyの新春セールを機に以下コースを購入しました。

• Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

上記コースは英語での解説となりますが、レビュー件数が多いながらも高評価。それに自動翻訳の日本語字幕もサポートされています。（あまり正確ではありませんが、なんとなく意味は理解できる。はず。）

readme.mdとか作ってませんが、以下に学習用リポジトリを作成しています。以下リポジトリのvue-component-sampleを実装する中で調べたポイントを記載していきます。

github.com

内容

例えば以下のコードのように実装し、

export default {
  props: {
    propsValue: Number
  },
  methods: {
    editValue() {
      this.propsValue = 20
    }
}

editValue()を実行（プロパティのpropsValueの値を変更）し、ブラウザのコンソールを見ると以下のような警告メッセージが出力されています。

[Vue warn]: 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: "propsValue"

解決方法は以下の記事に記述されていました。*1

qiita.com

親→子コンポーネントのデータバインディングを伝播させるために、プロパティの値は変更しないことが推奨されているようです。（エラーではなく警告レベル）

プロパティの値を変更したい場合は、対象のプロパティ相当の名称でデータ(data)を定義、初期値としてプロパティの値をセット。のちの処理では、データに定義した値を変更する方向にすると良いそうです。

つまりこんな感じのコードになります。

export default {
  props: {
    propsValue: Number
  },
  data() {
    // プロパティの値を設定
    dataValue: this.propsValue
  },
  methods: {
    editValue() {
      // データに定義した値を変更
      this.dataValue = 20
    }
}

おわり

以上です。

コースは実践的でわかりやすいですが、きちんとした知識を会得するには、公式リファレンスも併せて読み進めた方がベターかなと感じています。

もし間違い等ありましたら、ご指摘いただけると助かります！

*1:後々調べて見ると、公式リファレンスのプロパティ - Vue.js - 単方向のデータフローにも記載されていました。ちゃんと公式リファレンスよみませうorz