『[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.』エラーの対処方法

H.KAMIYAMA
@alclimb

nuxt: v2.8.1

エラー内容

ブラウザのコンソール出力
[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: ---- [Vue 警告]:親コンポーネントが再レンダリングされるたびに値が上書きされるため、prop を直接変更することは避けてください。 代わりに、支柱の値に基づいてデータまたは計算プロパティを使用してください。 prop が変更されています:

修正前

vue スクリプト部 (TypeScript)
import { Component, Vue, Prop } from "nuxt-property-decorator"; @Component({}) export default class Header extends Vue { @Prop({ default: false }) public isEnable?: boolean = false; // ← prop に初期値や変更処理があると上記警告が表示される }

修正後

vue スクリプト部 (TypeScript)
import { Component, Vue, Prop } from "nuxt-property-decorator"; @Component({}) export default class Header extends Vue { @Prop({ default: false }) public isEnable?: boolean; // ← 初期値を削除 }
WRITER
H.KAMIYAMA
@alclimb
SERIES
この記事に連載はありません。
READ NEXT
COMMENTS
コメント機能は開発中です。実装完了まで今しばらくお待ちください。