Vue.js looks at a nested property inside an array

Question

I have a vue object:

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

Inside the array of objects, I will click on elements such as:

 item1 = { a: 1, b: 'type', c: '3.556' } ... itemN = { a: n, b: 'type', c: '5.226' } 

then I will update one of the properties of the "c" element, and I would like to set up an observer that warns me as soon as one of these properties changes.

EDIT: I also want to know that the witch element has changed

Answer 1

You can use the deep clock, but ... it does not make it easy to determine which element has changed.

 ... watch: { items: { handler: function (val, oldVal) { }, deep: true } } ... 

One possible workaround is mentioned in this answer . The idea of ​​this solution is to wrap each element in a component and listen for an event from the component.

You can also store an array of cloned elements and update this clone in the watch handler, you can use this clone to change the filter element.