使用 Vue.js 2 进行数组监视

Question

我有一组在 v-for 循环中呈现并与 v-model 绑定的选择（分配给项目的 item.pricelists）。该项目的可能选择选项使用 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}
}

现在，注意 - 这对于简单的 var 来说效果很好 - 拒绝让步。

这是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 函数时选择已经改变。

Answer 2

你实际上可以在数组变量上设置观察者，你的方法的问题是你在item.pricelists.id上设置了观察者，但item.pricelists是一个数组，所以你不能直接访问id。

您可以在完整数组上设置一个观察者，如下所示（参见fiddle）：

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

注意：

使用这种方法的注意事项如 docs 中所述：

当改变（而不是替换）对象或数组时，旧值将与新值相同，因为它们引用相同的对象/数组。 Vue 不保留预突变值的副本。

如果您需要 oldValue 和新值，您可以使用 Vue.set 来查看此 fiddle，如 here 的解释。

---

您还可以在数组的单个元素上设置观察者，如下所示（参见fiddle）：

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