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

Posted 2023-02-22

【中文标题】使用 Vue.js 2 进行数组监视

【英文标题】：Array watch with Vue.js 2

【发布时间】：2017-05-03 05:59:56

【问题描述】：

我有一组在 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，但无法理解它。任何帮助将不胜感激。

【参考方案1】：

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

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

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

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

    
  

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

【讨论】：

我实际上在某个时候有过这种情况，但由于某种模糊的原因想知道更改前的值。这让我不再摆弄观察者，重新思考数据流。像魅力一样工作

【参考方案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

【讨论】：

很高兴知道。但在第一个示例中，返回值始终相同 (val = oldval) ?

@Corwin 我已根据您的查询更新了答案。

如何获取更改项的索引？