не может получить доступ к "этому" внутри наблюдателя компонентов nuxtjs

Question

У меня есть компонент со свойством состояния под названием «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

Вы не можете использовать нотацию fat-arrow в компоненте Vue. js (Nuxt или иначе). Определение функции 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

Вы используете стрелочную функцию , которая привязывает ключевое слово this к объекту, определяющему функцию, а не к объекту, который вызвал функцию (который является текущим экземпляром компонента в этом case).

Вместо этого используйте обычный синтаксис функции:

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