2017-09-23 6 views
0

私の子供のコンポーネント(オートコンプリート)が親(カーブ)の値を更新する必要がある状況に陥りました。そして、親は子供の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> 

多くの人が同じ警告を取得しているが、私は私が見つけたいくつかのソリューションを試みたが、私はそれらを動作させることができませんでした私の状況では(イベントを使用して、オートコンプリートの小道具のタイプをオブジェクトに変更し、他の計算値を使用して...)

この問題を解決する簡単な解決法はありますか?私はこの警告を無視するべきですか?

+0

// curve.vue <template> <autocomplete v-model="curve.y"></autocomplete> </template> <script> import Autocomplete from './autocomplete' export default { name: 'Curve', props: { value: Object }, data() { return { currentValue: this.value } } computed: { curve() { return this.currentValue } }, watch: { 'curve.y'(val) { this.$emit('input', this.currentValue); } }, components: { Autocomplete } } </script> // autocomplete.vue <template> <input type="text" v-model="content"/> </template> <script> export default { name: 'Autocomplete', props: { value: { type: String, required: true } }, data() { return { currentValue: this.value }; }, computed: { content: { get() { return this.value }, set(newValue) { this.currentValue = newValue; this.$emit('input', this.currentValue); } } } } </script> 
によってバインド:Vモデルで動作するコンポーネントのあなたは値propを受け入れ、入力イベントを出す必要があります!! –

答えて

1

あなたはそれを無視することができ、すべてうまくいくはずですが、それは悪い習慣です、それはvueがあなたに語っていることです。単一責任の原則に従わないときは、コードをデバッグするのがずっと難しくなります。

Vueは、データを所有するコンポーネントだけがそれを変更できる必要があることを示唆しています。

あなたの状況でイベントソリューション($emit)が動作しない理由がわからない場合は、エラーが表示されます。この警告を取り除くために

あなたも.sync修飾子を使用することができます:あなたが試すことができます https://vuejs.org/v2/guide/components.html#sync-Modifier

+0

'$ emit'と' $ on'を使ってもエラーは発生しませんでしたが、子が正しく更新されていません... 'v-on'で' v-model'を置き換え、 '.sync'と' $計算された値のセッターで「放出」してください!! ありがとう!私はちょっと愚かな気持ちで、私は '.sync'を見ることなく医師の時間を過ごしました... – Metikha

3

prop、次のコードである - >local data - すべてのコンポーネントおよびコンポーネントラッパーで>$emit local data to prop流れを。

PS:$(...、「入力」)を放出する(小道具に)値の更新であるDOCのVモデル

関連する問題