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

Question

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

我的原始代码工作正常（请参阅下面的代码段）。

＆＃13;

＆＃13;

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}
    }
  }
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

这是我的代码：

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

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

Answer 1

您遇到此错误，因为箭头函数不会将SELECT count(1) FROM c WHERE NOT IS_DEFINED(c.UserDataType) 绑定到您为其定义计算属性的vue实例。如果您使用箭头函数定义<form action='Try.php' > <textarea name='textarea'> Hello </textarea> <input type='submit' value="Refresh The Text Area" > </form> ，也会发生同样的情况。

  

不要在实例属性或回调上使用箭头函数（例如this。由于箭头函数绑定到父上下文，这不是您期望的Vue实例和{{1}将是未定义的。

您可以阅读。

Answer 2

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

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

Answer 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>

Answer 4

为什么不这样简单？

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>

Answer 5

你可以通过解构你想要的东西来实现这一点：

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

Answer 6

我不知道这将来是否会适得其反，但显然 vue 对象属性中使用的箭头函数将 this 上下文作为它们的第一个参数：

props: ['foo'],

data: (ctx) => ({
  firstName: 'Ryan',
  lastName: 'Norooz',
  // context is available here as well like so:
  bar: ctx.foo
}),

computed: {
  fullName: ctx => ctx.firstName + ' ' + ctx.lastName // outputs: `Ryan Norooz`
}

这样您仍然可以像 this 一样访问组件上下文中的所有内容！