我有一个Vue组件，如下所示。
而且我想使用watch作为特定关键字，而不是所有内容。
所以我做了一个计算函数来关注它。
下面的代码效果很好。
var vm = new Vue({
el: '#app',
computed: {
foo() {
return this.item.foo;
}
},
watch: {
foo() {
console.log('Foo Changed!');
}
},
data: {
item: {
foo: 'foo'
}
}
})
我把我的例子。在这种情况下，它将无法正常工作。因此，我猜它应该由手表的“ changedOptions”内部的“ deep：true”使用。但是我不知道如何在函数内部使用'deep'。您能推荐一些解决方案吗？
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')
}
}
仅当您在某处使用计算值时，才运行计算。
您可以在模板部分或脚本中使用它。
让我们像下面这样在安装时使用它
mounted () {
console.log(this.changedOptions)
// this will call the computed to return the value.
}
如果观察者仍然无法运行，则可以立即尝试：在观察者中为true，如下所示
watch: {
changedOptions: {
immediate: true,
handler () {
console.log('changed')
}
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句