Question

我有一个状态属性为“ volume”的组件，该组件绑定到一个滑块元素。我有一个监视者绑定到volume属性，以便在更新卷时，应触发一个函数

data () {return {
  volume: 0, 
}},

 methods: {
  testMethod () {
    console.log("this is firing")
  }
 },

watch: {
  volume: (v) => {
    console.log("volume has been updated", v);
    this.testMethod();
  }
}

在运行此代码时，控制台显示错误“无法读取未定义的“ testMethod”的属性”

我尝试了其他操作，例如访问$ store（这是我的第一个问题），但也无法解决。

Answer 1

您不能在Vue.js组件（Nuxt或其他）中使用fat-arrow表示法。 fat-arrow函数定义使用了错误的上下文（在您的情况下为this），这就是为什么您遇到此问题的原因。

<script>
  export default {
    data () {return {
      volume: 0, 
    }},

     methods: {
      testMethod () {
        console.log("this is firing")
      }
     },

    watch: {
      // Your old code.
      // volume: (v) => {
      //   console.log("volume has been updated", v);
      //   this.testMethod();
      // }
      // The corrected way.
      volume(v) {
        console.log("volume has been updated", v);
        this.testMethod();
      }
    }
  };
</script>

Answer 2

您正在使用Arrow Function，它将this关键字绑定到定义函数的对象，而不是调用函数的对象（在本例中为组件的当前实例））。

改为使用常规函数语法：

watch: {
  volume(v) {
    console.log("volume has been updated", v);
    this.testMethod();
  }
}

无法在组件观察程序nuxtjs中访问“ this”

2 个答案: