親子間のデータを渡すvuejs2が子をワイピングしています

Question

VueJS 2では、データを取得して親に戻し、別のコンポーネントに渡して表示するコンポーネントを作成しようとしています。

データを取得するコンポーネントには、検索に使用するユーザー入力フィールドがあります。 $ emitを使って親にデータを渡すと、入力の値は消去されたままになります。

私は以下の突然変異のエラーを受けていますが、コンポーネントのuserSearchフィールドを直接変更しようとしていないため、なぜそれがわかりません。

"親コンポーネントが再レンダリングするたびに値が上書きされるので、小道具を直接変更しないでください。代わりに、小道具の値に基づいてデータまたは計算されたプロパティを使用してください。 「

関連HTML

<person-field v-on:event_child="eventChild"></person-field> 
<person-search :prop="personListArray" ></person-search> 

親アプリ

var app = new Vue({ 
el: '#app', 
data: { 
    personListArray : [], 
    tempArray: [] 
}, 
methods: { 
    eventChild: function (arr) { 
     this.personListArray = arr 
    } 
} 
}) 

部品1は、ユーザの入力を表示します。入力を使用してデータを検索して戻します。入力の長さが2以上になると検索が開始されます.3文字目に達すると、入力したくないものが入力されます。

Vue.component('person-field', { 
props: ['userSearch'], 
template: '<input class="form-control" v-model="userSearch" >', 
watch: { 
    userSearch: function() { 
     var arr = [] 
     if (typeof this.userSearch !== 'undefined') { //added this because once i passed 3 characters in the field the userSearch variable becomes undefined 
      if (this.userSearch.length > 2) { 

       $.each(this.getUsers(this.userSearch), function (index, value) { 

        var obj = { 
         Title: value.Title, 
         ID: value.ID 
        } 

        arr.push(obj) 
       }); 

       this.$emit('event_child', arr) //emits the array back to parent "eventChild" method 
      } else { 
       console.log('no length') 
      } 
     } else { 
      console.log('cant find field') 
     } 
    }, 
}, 
methods: { 
    getUsers: function (filter) { 
     //gets and returns an array using the filter as a search 
     return arr 
    }, 

} 
}); 

成分2 - personListArrayに基づいて支柱として渡され、リストとして結果を表示し（この動作）

Vue.component('person-search', { 
props: ['prop'], 
template: '<ul id="personList">' + 
'<personli :ID="person.ID" v-for="person in persons">' + 
'<a class="" href="#" v-on:click="fieldManagerTest(person.Title, person.ID)">{{person.Title}}</a>' + 
'</personli></ul>', 
computed: { 
    persons: function() { 
     return this.prop 
    } 
}, 
methods: { 
    fieldManagerTest: function (title, ID) { //Remove item from users cart triggered via click of remove item button 

     //var user = ID + ';#' + title 
     //this.internalValue = true 
     //this.$emit('fieldManagerTest'); 
     //this.$parent.$options.methods.selectManager(user) 
    }, 
}, 

}); 

成分3、成分2

Vue.component('personli', { 
    props: ['ID'], 
    template: '<transition name="fade"><li class="moving-item" id="ID"><slot></slot></li></transition>' 
}) 

の一部

;

Answer 1

警告、親コンポーネントの再描画するたびに値が を上書きされますので、直接小道具を変異

回避を取得した理由。代わりに、小道具の値に基づいてデータまたは の計算されたプロパティを使用します。 （PersonFieldで見つかった） 「userSearch」

はここで、あなたはそれを言った式の値を変更しようとしますので、このラインの

<input class="form-control" v-model="userSearch" > 

v-modelです：変異されているプロップこのケースはプロパティであるuserSearchです。

代わりにuserSearchをローカル変数にコピーすることができます。

Vue.component('person-field', { 
    props: ['userSearch'], 
    data(){ 
     return { 
      searchValue: this.userSearch 
     } 
    }, 
    template: '<input class="form-control" v-model="searchValue" >', 
    ... 
}) 

そしてsearchValueを使用するようにwatchを変更します。

ここにはexampleがあります。