javascript - 用 Vue.js 2 观察数组

Question

我有一组选择(分配给项目的 item.pricelists)在 v-for 循环中呈现并与 v-model 绑定(bind)。该项目的可能选择选项由 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与代码的相关部分。

我在看 vue docs ，但我无法理解它。任何帮助将不胜感激。

Answer 1

我不知道是否可以用 watch 解决这个问题，但是，我会建议另一种方法。您可以将 v-on:change 添加到您的选择中:

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

并向 Vue 实例添加一个方法:

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

    }
  }
}

这样，只要调用 selectionChanged 函数，您就会知道选择已更改。