Javascript VueJS deep watcher-多个对象上的特定属性 问题

我有一个包含多个对象的“产品”数组。每个产品对象都包含属性“price”。我想在每个产品中查看此属性，以了解可能的更改。当用户在输入框中更改价格时，我使用它来计算佣金价格

我的产品阵列如下所示

[
  0: {
    name: ...,
    price: ...,
    commission: ...,
  },
  1: {
    name: ...,
    price: ...,
    commission: ...,
  },
  2: {
    name: ...,
    price: ...,
    commission: ...,
  },
  ...
  ...
  ...
]

mounted: async function () {
            this.products = await this.apiRequest('event/1/products').then(function (products) {
                // Attach reactive properties 'delete' & 'chosen' to all products so these can be toggled in real time
                for (let product of products) {
                    console.log(product.absorb);
                    Vue.set(product, 'delete', false);
                    Vue.set(product, 'chosen', product.absorb);
                }

                console.log(products);

                return products;
            })
        }

我的代码 我已经试过了，但除了第一次加载产品时，它没有检测到任何变化

    watch  : {
        // Watch for changes in the product price, in order to calculate final price with commission
        'products.price': {
            handler: function (after, before) {
                console.log('The price changed!');
            },
            deep   : true
        }
    },

产品是这样装载的

[
  0: {
    name: ...,
    price: ...,
    commission: ...,
  },
  1: {
    name: ...,
    price: ...,
    commission: ...,
  },
  2: {
    name: ...,
    price: ...,
    commission: ...,
  },
  ...
  ...
  ...
]

mounted: async function () {
            this.products = await this.apiRequest('event/1/products').then(function (products) {
                // Attach reactive properties 'delete' & 'chosen' to all products so these can be toggled in real time
                for (let product of products) {
                    console.log(product.absorb);
                    Vue.set(product, 'delete', false);
                    Vue.set(product, 'chosen', product.absorb);
                }

                console.log(products);

                return products;
            })
        }

我看过的其他问题 这一个正在尝试监视一个还不存在的属性。

---

这一个正在监视另一个组件中的更改。

您不能真正深入监视

产品。价格

，因为价格是单个产品的属性，而不是产品数组

声明性监视程序在数组中有问题，如果您试图在监视表达式中使用索引，例如

产品[0]。价格
，则会收到Vue的警告

[Vue warn]：无法查看路径：“产品[0]。价格”。Watcher只接受简单的点分隔路径。要实现完全控制，请改用函数

这意味着你可以使用一个函数，但它的解释不是很好

在您的场景中，有一种方法可以做到这一点


导出默认值{
名称：“产品”，
数据（）{
返回{
产品：[]
};
},
已装入：异步函数（）{
this.products=等待此.apirest（'event/1/products'）。。。
console.log（“分配给this.products之后”，this.products）；
//使用公共处理程序在此处添加观察者
this.products.forEach（p=>this.watch（（）=>p.price，this.onPriceChanged））；
//模拟变化
设置超时（（）=>{
控制台日志（“更改价格”）；
此.products[0]。价格=100；
}, 1000);
},
方法：{
OnPrice更改（之后、之前）{
console.log（之前、之后）；
}
}
};

这是我的测试（我使用颜色而不是价格，因为测试api中没有价格）
很好，这似乎是我需要它做的-谢谢！