I have a vue component that I am working with.
I want to be able to use the watch feature for a specific keyword instead of everything.
To achieve this, I created a computed function to focus on it.
The code snippet below demonstrates how I accomplished this successfully.
var vm = new Vue({
el: '#app',
computed: {
foo() {
return this.item.foo;
}
},
watch: {
foo() {
console.log('Foo Changed!');
}
},
data: {
item: {
foo: 'foo'
}
}
})
However, when I implemented this in a different example, it did not work as expected. I believe I need to include 'deep: true' within the 'changedOptions' section of the watch property.
But I am unsure how to utilize 'deep' within a function. Can you suggest any potential solutions?
data(){
return {
deliveryOptions: {
weight: 3,
options: { express: false, shuttle: false, bike: true, walk: false },
},
computed: {changedOptions() {
return this.deliveryOptions.options;
}
},
watch: {
changedOptions(){
console.log('changed')
}
}