CODEWITHSUNDEEP
javascriptvue.js
Plastic
Plastic

Reputation: 10318

Vue.js watch a nested property inside array

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

Upvotes: 8

Views: 6066

Answers (1)

donMateo
donMateo

Reputation: 2394

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.

Upvotes: 2

Related Questions