Suppose I have a watcher that is watching an array mylist
watch {
mylist:function(){
//Code
}
}
How can I programatically trigger an update on the variable and run the code (if the variable is unchanged)? How can I trigger an update if the watched variable is a nested object/array or a simple string?
Since you didn't provide any description regarding the actual use-case, the best you can probably do is to extract a method that is called in call this method manually.
data: function() {
return { myList: [] }
},
watch: {
myList: this.handleListChange
},
methods: {
handleListChange: function(a, b) {
// .. do whatever you want to do in the watch method
}
}
To trigger the "watch" method you can now simply call your handleListChange method manually.
There are 2 questions:
How can I programatically trigger an update on the variable and run the code if the variable is unchanged?
You can hack it this way:
this._watchers.find(w => w.expression === "mylist").cb(this.mylist);
However, it's not part of the official Vue API. The _watchers list is rather an implementation detail. It may change in the future without any notice.
How can I trigger an update if the watched variable is a nested object/array?
Use a deep watcher:
watch: {
mylist: {
handler: function(val) {
// Code
},
deep: true
}
}
Working example: https://jsfiddle.net/LukaszWiktor/zjagahq2/
Here is how i did it
Frank was on to something, i just couldn't access the "this" context like suggested
so all had to do was pass all the args to the method.
watch: {
myList: (...args) { this.handleListChange(...args) },
}
