Question

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

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

Answer 1

我不知道是否有可能用手表来解决这个问题，但是，我建议采用另一种方法。您可以将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没有保留pre-mutate值的副本。

如果您想要oldValue以及新值，则可以使用fiddle Vue.set查看此here。{/ 3}}。

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

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

数组手表与Vue.js 2

2 个答案: