タイトル通り、本記事はプロパティの値を変更した際に警告(Vue warn)が発生した際の原因と対処方法を記載していきます。
はじめに
業務でVue.jsをデータバインディング程度に使用していましたが、本格的(コンポーネント化、親子でのデータ通信など)に使用するようになりました。
ってことで、Udemyの新春セールを機に以下コースを購入しました。
上記コースは英語での解説となりますが、レビュー件数が多いながらも高評価。それに自動翻訳の日本語字幕もサポートされています。(あまり正確ではありませんが、なんとなく意味は理解できる。はず。)
readme.mdとか作ってませんが、以下に学習用リポジトリを作成しています。以下リポジトリのvue-component-sampleを実装する中で調べたポイントを記載していきます。
内容
例えば以下のコードのように実装し、
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
親→子コンポーネントのデータバインディングを伝播させるために、プロパティの値は変更しないことが推奨されているようです。(エラーではなく警告レベル)
プロパティの値を変更したい場合は、対象のプロパティ相当の名称でデータ(data)を定義、初期値としてプロパティの値をセット。のちの処理では、データに定義した値を変更する方向にすると良いそうです。
つまりこんな感じのコードになります。
export default { props: { propsValue: Number }, data() { // プロパティの値を設定 dataValue: this.propsValue }, methods: { editValue() { // データに定義した値を変更 this.dataValue = 20 } }
おわり
以上です。
コースは実践的でわかりやすいですが、きちんとした知識を会得するには、公式リファレンスも併せて読み進めた方がベターかなと感じています。
もし間違い等ありましたら、ご指摘いただけると助かります!
*1:後々調べて見ると、公式リファレンスのプロパティ - Vue.js - 単方向のデータフローにも記載されていました。ちゃんと公式リファレンスよみませうorz