In this tutorial, we will learn how to watch the nested data like arrays and objects in Vue.js
Watching Props Arrays:
export default {
name: "ComponentName",
props: {
users: {
type: Array,
required: true,
},
},
watch: {
users: {
deep: true,
handler(newValue, oldValue) {
console.log("Manipulate new and old value here")
}
}
},
}Here we are using the users array and watching it inside the watch block. deep: true will let Vue to watch inside the array and the handler will give the old and new values.
Watching Objects:
export default {
name: "ComponentName",
data() {
return {
entity: {
properties: [],
propertyOne:'',
propertyTwo:''
}
}
},
watch: {
entity: {
deep: true,
handler(newValue, oldValue) {
console.log("Manipulate new and old value here")
}
}
},
}
Here, we are creating the entity object and watching it in the watch block. Here it will deep watch the whole entity object.
Watching properties of Objects:
If we don't want to watch for every change on the object, we can watch every single entity as well
export default {
name: "ComponentName",
data() {
return {
entity: {
properties: [],
propertyOne:'',
propertyTwo:''
}
}
},
watch: {
'entity.properties': {
handler(newValue, oldValue) {
console.log("Manipulate new and old value here")
},
deep: true
},
'entity.propertyOne': {
handler(newValue, oldValue) {
console.log("Manipulate new and old value here")
},
},
},
}Watching properties of Objects using computed:
export default {
name: "ComponentName",
data() {
return {
entity: {
properties: [],
propertyOne:'',
propertyTwo:''
}
}
},
computed: {
entityPropertyOne() {
return this.entity.propertyOne;
}
},
watch: {
entityPropertyOne: {
handler(newValue, oldValue) {
console.log("Manipulate new and old value here")
},
},
},
}
