我正在学习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>





但是，更改计算属性中的方法后，颜色不会更改（尽管turnRed值仍然可以在true和false之间成功切换）。

此是我的代码：

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


我使用了错误的语法吗？

评论

看看我的答案。我包括了被窃取的工作。
箭头功能将此范围更改为其父级
这回答了你的问题了吗？ VueJS：为什么未定义“ this”？

#1 楼

您遇到此错误是因为箭头功能不会将this绑定到您要为其定义计算属性的vue实例。如果要使用箭头函数定义methods，也会发生同样的情况。


不要在实例属性或回调中使用箭头函数（例如vm.$watch('a', newVal => this.myMethod()))。因为箭头函数绑定到了父上下文，它不会像您期望的那样是Vue实例，并且this.myMethod将是未定义的。


您可以在这里阅读有关它。

评论

尽管不需要访问此对象时可以使用箭头功能：计算：{switchRed：（）=>（{red：“ red”}），...}

– Soldeplata Saketos
18-11-8在10:52


#2 楼

箭头函数丢失了Vue组件上下文。对于methods，computed，watch等中的功能，请使用对象函数：

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


评论

我在这里只能添加的是，如果您在这些函数中包含函数，例如回调，然后使用箭头函数可以使您的代码更整洁，因为它使用了封闭上下文（现在是vue实例）中的此对象。

–秋浪
18年1月25日在3:30


这是最有用的答案，因为它说明了解决问题的方法。我建议将此答案和可接受的答案作为实际的“完全理想”答案。

– DrCord
18年3月20日在19:31
我注意到的一件奇怪的事是，当您使用箭头函数定义计算属性，然后使用chrome devtools进行调试时，它仍然看起来好像“这”在引用VueJS组件上下文。我花了很长时间才弄清楚箭头函数是造成我问题的原因，因为当我在箭头函数中放入“ debugger”语句然后检查“ this”时，所有组件数据都出现了，但是当我尝试console.log（）时我的组件数据未定义。

–凯文·奥德
18-10-18在14:39

#3 楼

为什么不这样简单呢？



 new Vue({
  el: '#app',
  data: {
    turnRed: false,
    turnGreen: false,
    turnBlue: false
  },
  methods:{
    toggle (color) {
      this[`turn${color}`] = !this[`turn${color}`];
    }
  }
}); 

 .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="toggle('Red')" :class="{red:turnRed}"></div>
  <div class="demo" @click="toggle('Green')" :class="{green: turnGreen}"></div>
  <div class="demo" @click="toggle('Blue')" :class="{blue: turnBlue}"></div>
</div>




#4 楼

创建计算文件时，请勿使用=>，而应仅使用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>