vuejs2在父子之間傳遞數據正在擦孩子值

Question

在VueJS 2中我試圖創建一個組件，它獲取數據並將數據傳遞迴父級，然後將數據傳遞給另一個組件以進行顯示。

獲取數據的組件具有用於搜索的用戶輸入字段。當我有它傳遞數據回到父母使用$發射輸入中的值繼續被擦除。

我收到以下突變錯誤，但我沒有直接嘗試更改組件中的userSearch字段，所以我不知道爲什麼。

「避免直接對prop進行變異，因爲當父組件重新呈現時，該值將被覆蓋，而是根據prop的值使用數據或計算屬性，prop被突變：」userSearch「（在PersonField中找到） 「

相關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時開始搜索。一旦你點擊第三個字符，就會導致輸入清除我不想要的內容。

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

你得到警告的原因，

避免直接變異的一個道具，因爲該值將被覆蓋 每當父組件重新呈現。相反，使用基於prop值的數據或 計算屬性。道具被突變： 「userSearch」（在PersonField找到）

是因爲該行的

<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" >', 
    ... 
}) 

並修改watch使用searchValue。

這是example。