Vue- How to watch the properties inside array of objects

Question

I have a JSON like this

'criteria': [
 {
  'row': {
    'name': '1',
    'values': [{}]
  }
 },
 {
  'row': {
    'name': '2',
    'values': [{}]
  }
 }
]

I tried this

watch: {
 criteria: {
   deep: true,
   handler () {
    console.log(this.criteria)
   }
  }
}

But it is watching every change in the criteria. How can i watch only Values? Is there any way to write a custom function and return what ever i want to watch like in angular?

Updated :

I tried this as well

computed: {
test () {
  var values = []
  _.forEach(this.criteria, function (criteria) {
    _.forEach(criteria.row, function (row) {
      values.push(row.values)
    })
  })
  return values
}
},
watch: {
  test () {
   console.log("changed")
  }
}

Still watching every thing.

Phap Duong Dieu · Accepted Answer · 2018-12-03 09:41:39Z

You need to watch criteria array and detect the changed items in watch handling function.

data: {
    criteria: [
        {
            'row': {
                'name': '1',
                'values': [{}]
            }
        },
        {
            'row': {
                'name': '2',
                'values': [{}]
            }
        }
    ],
    oldCriteria: []
},
methods: {
    setCriteriaValue() {
        // deep clone
        this.oldCriteria = JSON.parse(JSON.stringify(this.criteria))
    },
},
mounted() {

    // TEST: isChange = FALSE
    setTimeout(() => {
        this.criteria[1].row.name = "new name"
    }, 2000);

    // TEST: isChange = TRUE
    setTimeout(() => {
        this.criteria[1].row.values = [10, 20]
    }, 4000);
},
watch: {
    "criteria": {
        deep: true,
        handler: function (after) {
            console.log("criteria watched")

            var vm = this;
            let isChanged = false;

            for (let index = 0; index < after.length; index++) {

                const item = after[index].row
                const props = Object.keys(item)

                isChanged = props.some(function(prop) {
                    if (prop === "values") {
                        const newValue = item[prop]
                        const oldValue = vm.$data.oldCriteria[index].row[prop]

                        return JSON.stringify(newValue) !== JSON.stringify(oldValue);
                    }

                    return false
                })
            }

            if (isChanged) {
                alert("CHANGED!")

                // Do your stuff here
                // ...
            }

            // Update the old value
            vm.setCriteriaValue();
            console.log("isChanged = ", isChanged)
        }
    }
}

tony19 · Accepted Answer · 2022-07-15 01:35:03Z

2

Simply watch the length of criteria

Like for your use case:

watch: {
 'criteria.length': {
   handler () {
    console.log(this.criteria)
   }
  }
}

Here is the full API:

https://v2.vuejs.org/v2/api/#watch

You can watch anything.

Trick: make a computed prop and watch computed prop.

edited Jul 15, 2022 at 1:35

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 3, 2018 at 8:46

pranavjindal999

3,0674 gold badges29 silver badges36 bronze badges

3 Comments

Sam Over a year ago

Hey i want to watch 'Values' property inside criteria->rows->'values'.

Sam Over a year ago

I updated my question, i tried using computed. What is the wrong which i am doing?

pranavjindal999 Over a year ago

@Sam your test computed depends upon this.criteria and every row in every criteria and hence will be re-computed on every change. That is how Vue's dependency tracking works. What you can do now is check oldValue and newValue of your watcher and do action only if both are different.

Collectives™ on Stack Overflow

Vue- How to watch the properties inside array of objects

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related