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

问题描述

我正在学习 Vue 并在计算属性中使用箭头函数时遇到问题.

我的原始代码工作正常(见下面的片段).

new Vue({el: '#app',数据: {变红:假，变绿:假，转蓝:假},计算:{开关红色:函数(){返回{红色:this.turnRed}},switchGreen:函数(){返回{绿色:this.turnGreen}},switchBlue:函数(){返回{蓝色:this.turnBlue}}}});

.demo{宽度:100px；高度:100px；背景颜色:灰色；显示:内联块；边距:10px；}.红色的{背景颜色:红色；}.绿色{背景颜色:绿色；}.蓝色{背景颜色:蓝色；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></脚本><div id="应用程序"><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>

但是，我在计算属性中更改方法后，颜色不会改变(尽管turnRed值仍然成功地在true和false之间切换).

这是我的代码:

计算:{switchRed: () =>{返回{红色:this.turnRed}},switchGreen: () =>{返回{绿色:this.turnGreen}},switchBlue: () =>{返回{蓝色:this.turnBlue}}}

我是否使用了错误的语法?

解决方案

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

<块引用>

不要在实例属性或回调上使用箭头函数(例如 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屋！