Vue.js數組2

Question

我在v-for循環中呈現一組選擇（item.pricelists，分配給一個項目），並與v-model綁定。該項目的可能選擇選項使用item.valid_pricelists中的另一個v-for呈現。兩者都從同一陣列中的服務器中拉出。 現在我需要注意用戶何時更改選擇，所以我可以使用item.valid_pricelists中的新值更新item.pricelists數組。

渲染部分：

<div v-for="(row,index) in item.pricelists"> 
    <select v-model="row.id"> 
     <option :value="price_list.id" v-for="price_list in item.valid_pricelists"> 
     {{price_list.description}} 
     </option> 
    </select> 
    Parent pricelist : {{row.parent_id}} 
</div> 

關注部分：

watch:{ 
    'item.pricelists.id': { 
     handler: function (val,oldVal) { 
      console.log(val + " - " + oldVal); 
     }, deep:true} 
} 

現在，手錶 - 這只是正常的簡單瓦爾 - 拒絕讓步。

這是fiddle與代碼的相關部分。

我在看012uevue，但無法包裹我的頭。任何幫助，將不勝感激。

Answer 1

我不知道是否可以用手錶來解決這個問題，但是，我會建議另一種方法。你可以添加v-on:change到您的選擇：

<select v-model="row.id" v-on:change="selectionChanged(row)"> 

，並添加一個方法到Vue的實例：每當selectionChanged函數被調用

new Vue({ 
    ... 
    methods: { 
    selectionChanged: function(item) { 

    } 
    } 
} 

這樣你就知道該選擇發生了變化。

Answer 2

你實際上可以設置觀察者的數組變量，你的方法的問題是你設置的觀察者在item.pricelists.id，但item.pricelists是一個數組，因此你不能直接訪問id就可以了。

您可以設置一個觀察者完整陣列上像以下（見fiddle）：

watch:{ 
    'item.pricelists': { 
     handler: function (val,oldVal) { 
      console.log(val + " - " + oldVal); 
     }, deep:true} 
} 

注：

買者用這種方法作爲docs解釋說：

當變異（而不是替換）對象或數組時，舊值將與新值相同，因爲它們引用相同的對象/數組。 Vue不保留pre-mutate值的副本。

如果你想要的屬性oldValue以及新的價值，你可以看看這個fiddle使用Vue.set作爲解釋here。

---

您還可以設置觀察家數組的單個元素像下面（見fiddle）：

watch:{ 
    'item.pricelists.0.id': { 
     handler: function (val,oldVal) { 
      console.log(val + " - " + oldVal); 
     }, deep:true} 
}