Question

我有一个如下所示的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')
    }
 }

Answer 1

仅当您在某处使用计算值时才运行计算。

您可以在模板部分或脚本中使用它。

让我们像下面这样安装在其上

mounted () {
  console.log(this.changedOptions)
  // this will call the computed to return the value.
}

如果观察程序仍然没有运行，则可以尝试立即执行：在如下所示的观察程序中为true

 watch: {
    changedOptions: {
       immediate: true, 
       handler () {
          console.log('changed')
        }
    }
 }

如何在vuejs中使用“深层方法”

1 个答案: