在vue计算中使用箭头功能不起作用 [英] Use arrow function in vue computed does not work

问题描述

我正在学习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;身高：100px;背景颜色：灰色; display：inline-block; margin：10px;}。red {background-color：red;}。green {background-color：green;}。blue {background-color：blue;}  

< pre class =snippet-code-html lang-html prettyprint-override> < 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之间切换成功） 。

这是我的代码：

 计算：{
 switchRed :(）=> {
返回{red：this.turnRed} 
}，
 switchGreen :(）=> {
 return {green：this.turnGreen} 
}，
 switchBlue :(）=> {
 return {blue：this.turnBlue} 
} 
} 
  

<我是否使用了错误的语法？

解决方案

您正面临此错误，因为箭头函数无法绑定 this 到你要为其定义计算属性的vue实例。如果您使用箭头函数定义方法，也会发生同样的情况。

不要在实例属性或回调上使用箭头函数（例如 vm。$ watch（'a'，newVal => this.myMethod（）））。由于箭头函数绑定到父上下文，这将不是您期望的Vue实例，并且 this.myMethod 将是未定义的。

你可以读到它这里。

I am learning Vue and facing a problem while using arrow function in computed property.

My original code works fine (See snippet below).

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>

However, after I change methods in computed property, the color will not change (though the turnRed value still switch between true and false successfully).

This is my code:

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

Do I use the wrong syntax ?

解决方案

You are facing this error because an arrow function wouldn't bind this to the vue instance for which you are defining the computed property. The same would happen if you were to define methods using an arrow function.

Don’t use arrow functions on an instance property or callback (e.g. vm.$watch('a', newVal => this.myMethod())). As arrow functions are bound to the parent context, this will not be the Vue instance as you’d expect and this.myMethod will be undefined.

You can read about it here.

这篇关于在vue计算中使用箭头功能不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！