Vuexオブジェクトフォーム：子コンポーネントへのイベント委譲

Question

状態オブジェクトを小道具として渡しましたが、プロパティ変更時にオブジェクト全体を上書きするためにミューテータに渡すように配列を変更することはできますが、プロパティではできませんリテラル。

ドキュメントでは、配列/オブジェクトを変更できるはずですが、object.prop = "string"は変更できないことを警告しています。また、なぜ私は実際に不変であることを意味する状態オブジェクトの配列を変更できるのか理解できません。リテラルである小道具を変更するには回避策がありますが、元の小道具と同期がとれていません。状態オブジェクトのプロパティを変更するためのフォームを作成するための効率的なソリューションをもう一つ見つけてうれしいです。

<div id="skillListing" class="ui item" @change="resetSkill"> 
    <input :value="filter.name" placeholder="edit me"> 

    props: [ 
    "filter", 
    "fIndex", 
    "gIndex" 
    ], 
    methods: { 
    resetSkill() { 
     console.log(this.filter.name) //won't change 
     this.$store.commit('upsert_skill', {o: this.filter, f: this.fIndex, g: this.gIndex}) 
    } 
    } 

Answer 1

コンポーネントのみを入力フィールドの場合、私は、あなたの質問から理解して何から、あなたは小道具を渡すためにv-modelを使用することができます。

v-modelは、基本的にユーザー入力イベントに関するデータを更新するためのシンタックスシュガーです。

<input v-model="something"> 

ためだけ糖衣構文である：子コンポーネントでは、とfilter.name変数を変更します入力フィールド呼び出し、次の変化にvalue：あなたはpropを渡すことができ

<input v-bind:value="something" v-on:input="something = $event.target.value"> 

。

this.$emit('input', newVal) 

これは、あなたのコンポーネントを使用する方法である。

<your-component v-model="filter.name"></your-component> 

あなたがこのアプローチhereを使用して1つの実装を見てすることができます。