小编典典

在计算的vue中使用箭头功能不起作用

javascript

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

我使用错误的语法吗?


阅读 362

收藏
2020-04-25

共1个答案

小编典典

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

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

2020-04-25