私の子供のコンポーネント(オートコンプリート)が親(カーブ)の値を更新する必要がある状況に陥りました。そして、親は子供の1つを更新する必要があります新しい曲線コンポーネントが使用されたときに完全に再レンダリングする)Vue2:警告:小道具を直接変更することを避ける
私のアプリでは、ユーザーは曲線コンポーネントのリストで曲線を選択できます。ユーザーがリスト内の別の曲線を選択したとき(コンポーネントがその値を親の値で更新しなかった場合)、コンポーネントのオートコンプリートが更新されなかったことを除いて、以前のコードは正しく機能しました。
、この問題は修正されましたが、私はこの警告を得る:親コンポーネントの再描画するたびに値が を上書きされますので、直接小道具を変異
避けます。代わりに、小道具の値に基づいてデータまたは の計算されたプロパティを使用します。プロップされている突然変異: "値"
この警告の説明は、コンポーネントから期待される動作を正確に説明しています。この警告にもかかわらず、このコードは完璧に動作します!
ここでは、コード(それの部品を簡素化するために削除されている)
// curve.vue
<template>
<autocomplete v-model="curve.y"></autocomplete>
</template>
<script>
import Autocomplete from './autocomplete'
export default {
name: 'Curve',
props: {
value: Object
},
computed: {
curve() { return this.value }
},
components: { Autocomplete }
}
</script>
// autocomplete.vue
<template>
<input type="text" v-model="content"/>
</template>
<script>
export default {
name: 'Autocomplete',
props: {
value: {
type: String,
required: true
}
},
computed: {
content: {
get() { return this.value },
set(newValue) { this.value = newValue }
}
}
}
</script>
多くの人が同じ警告を取得しているが、私は私が見つけたいくつかのソリューションを試みたが、私はそれらを動作させることができませんでした私の状況では(イベントを使用して、オートコンプリートの小道具のタイプをオブジェクトに変更し、他の計算値を使用して...)
この問題を解決する簡単な解決法はありますか?私はこの警告を無視するべきですか?