Использовать функцию стрелки в вычисляемом vue не работает

Я изучаю Vue и сталкиваюсь с проблемой при использовании функции стрелки в вычисленном свойстве.

Мой оригинальный код работает отлично (см. Ниже фрагмент).

new Vue({
  el: '#app',
  data: {
    turnRed: false,
    turnGreen: false,
    turnBlue: false
  },
  computed:{
  	switchRed: function () {
    	return {red: this.turnRed}
    },
    switchGreen: function () {
    	return {green: this.turnGreen}
    },
    switchBlue: function () {
    	return {blue: this.turnBlue}
    }
  }
});

.demo{
  width: 100px;
  height: 100px;
  background-color: gray;
  display: inline-block;
  margin: 10px;
}
.red{
  background-color: red;
}
.green{
  background-color: green;
}
.blue{
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></script>
<div id="app">
  <div class="demo" @click="turnRed = !turnRed" :class="switchRed"></div>
  <div class="demo" @click="turnGreen = !turnGreen" :class="switchGreen"></div>
  <div class="demo" @click="turnBlue = !turnBlue" :class="switchBlue"></div>
</div>

Ответ 1

Вы столкнулись с этой ошибкой, потому что функция стрелки не связывает this с экземпляром vue, для которого вы определяете вычисленное свойство. То же самое произойдет, если вы должны определить methods используя функцию стрелки.

Не используйте функции стрелок для свойства экземпляра или обратного вызова (например, vm.$watch('a', newVal => this.myMethod())). Поскольку функции стрелок привязаны к родительскому контексту, это не будет экземпляр Vue, как ожидалось youd, и this.myMethod не будет определен.

Вы можете прочитать об этом здесь.

Ответ 2

Функция funtion проиграла контекст компонента VueJS. Для ваших функций в methods, computed, watch ,... используйте функции Object:

computed:{
    switchRed() {
        return {red: this.turnRed}
    },
    switchGreen() {
        return {green: this.turnGreen}
    },
    switchBlue() {
        return {blue: this.turnBlue}
    }
}

Ответ 3

При создании вычислений вы не используете =>, вы должны просто использовать switchRed() {...

Взгляните на фрагмент. Работает так, как должно.

Он применяется ко всем вычислимым методам, наблюдателям и т.д.

new Vue({
  el: '#app',
  data: {
    turnRed: false,
    turnGreen: false,
    turnBlue: false
  },
  computed:{
  	switchRed () {
    	return {red: this.turnRed}
    },
    switchGreen () {
    	return {green: this.turnGreen}
    },
    switchBlue () {
    	return {blue: this.turnBlue}
    }
  }
});

.demo{
  width: 100px;
  height: 100px;
  background-color: gray;
  display: inline-block;
  margin: 10px;
}
.red{
  background-color: red;
}
.green{
  background-color: green;
}
.blue{
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></script>
<div id="app">
  <div class="demo" @click="turnRed = !turnRed" :class="switchRed"></div>
  <div class="demo" @click="turnGreen = !turnGreen" :class="switchGreen"></div>
  <div class="demo" @click="turnBlue = !turnBlue" :class="switchBlue"></div>
</div>