Vue.jsでAvoid mutating a prop directly since the value ... が発生した場合の対応メモ

 Vue.jsで「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: xxxx」というワーニングが出たので、以下のような対応をして回避しました。

発生原因

親コンポーネントから渡すデータを、子コンポーネント側で変更しようとしていたため出たワーニングと思われます。

エラーメッセージをGoogle翻訳で訳してみると「親コンポーネントが再レンダリングされるたびに上書きされるため、Propを直接変更することは避けてください。...」らしいです。

対応方法

子コンポーネントで値を代入している箇所があったので、該当箇所を修正しました。その後ワーニングは出なくなりました。

その他情報

vue 2.6.12

typescript 3.9.7