I'm currently developing an automatic save feature for a Vue application that sends data to an API every time there is a change in the data. I am wondering if it is possible to selectively ignore certain properties of an object when using a Vue watch. The object contains multiple values that I want to monitor for auto-saving, but there are 1 or 2 properties that I would like to exclude. Instead of setting up individual watch functions for all the properties I want to track, I'd prefer to just ignore the ones that don't need to be watched.
Here is the basic structure of the data:
data:{
template: {
name: "Template",
id: 1,
variables: [
{
name: "v1",
color: "#fff",
group: 1,
isSelected: true
},
{
name: "v2",
color: "#fff",
group: 3,
isSelected: false
}
]
}
}
And here is the simplified watch function:
watch: {
template: {
handler: function(){
this.save();
},
deep: true
}
}
The 'isSelected' field within the 'variables' in the template is used solely for UI purposes and should not trigger the watch function as these changes are not saved. Rather than creating a specific watch function for each field in 'variables', I would like to include something in the watch like:
ignore: "template.variables.isSelected"