Issue at Hand
In my scenario, I have an array named "products" that consists of multiple objects. Each object within the product array includes a property called "price". My goal is to monitor any changes in this particular property for each product. This monitoring is necessary to calculate a commission price whenever a user modifies the price in an input field.
This is how my products array is structured;
[
0: {
name: ...,
price: ...,
commission: ...,
},
1: {
name: ...,
price: ...,
commission: ...,
},
2: {
name: ...,
price: ...,
commission: ...,
},
...
...
...
]
Implemented Code
I coded the following solution, which unfortunately only captures the initial load of products and not subsequent changes;
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
}
},
The products get loaded using this method;
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;
})
}
Additional Resources Referenced Vue.js watching deep properties This question revolves around observing a property that is not yet available. VueJs watching deep changes in object In this case, the focus is on monitoring changes in a different component.