数组手表与Vue.js 2

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}
}

现在,观看 - 对于简单的vars来说效果很好 - 拒绝让步.

这是代码相关部分的小提琴.

我正在查看vue 文档,但无法绕过它.任何帮助,将不胜感激.

Answer 1

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

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

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

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

    }
  }
}

这样，每当selectionChanged调用该函数时，您就会知道选择已更改。