Vue.js 观察数组内的嵌套属性

Posted 2023-02-22

【中文标题】Vue.js 观察数组内的嵌套属性

【英文标题】：Vue.js watch a nested property inside array

【发布时间】：2017-05-22 17:52:58

【问题描述】：

我得到了一个像这样的 vue 对象：

var vm = new Vue(
            el: '#app',
            data: 
                items: [],
                index: 0
            ,

            );

在 items 数组中，我将推送如下项目：

item1 = 
    a: 1,
    b: 'type',
    c: '3.556'

...
itemN = 
    a: n,
    b: 'type',
    c: '5.226'

然后我将更新该项目的“c”属性之一，并且我想设置一个观察者，一旦该属性之一发生变化就会警告我。

编辑：我也想知道女巫物品发生了变化

【参考方案1】：

您可以使用深度观察，但是...它无法轻松确定哪个项目已更改。

...
watch: 
  items: 
    handler: function (val, oldVal) 

    ,
    deep: true
  

...

this answer 中提到了一种可能的解决方法， 该解决方案背后的想法是将每个项目包装在组件中并监听来自组件的事件。

您还可以存储克隆的项目数组并在监视处理程序中更新该克隆，您可以使用该克隆来过滤已更改的项目。