Vue.js watch a nested property inside array

Question

I got a vue object like this:

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

            });

Inside items array i will push items like:

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

then i will update one of the item's "c" property and i would like to set up a watcher that warn me as soon as one of this property changes.

EDIT: i also want to know witch item has changed

score 2 · Answer 1 · answered Oct 11 '17 at 08:37

You can use deep watch, but... it does not provide ease way to determine which item has changed.

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

    },
    deep: true
  }
}
...

One of possible workarounds is mentioned in this answer, idea behind this solution is to wrap each item in component and listen to event from component.

You can also store cloned items array and update that clone in watch handler, you can use that clone to filter item that has changed.

Vue.js watch a nested property inside array

1 Answers1