在值计算中使用箭头函数不起作用

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

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

这是我的暗号:

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

我用错语法了吗？

49551 次浏览
小开
最佳答案

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

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

你可以阅读它 给你。

小开

箭头函数丢失了 Vue 组件上下文。对于 methods、 computed、 watch等函数，使用 Object 函数:

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

创建计算机时不使用 =>，应该只使用 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>

小开

为什么不这样简单一点呢？

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>

小开

你可以通过解构你想从中得到的东西来实现这一点:

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

我不知道这是否会适得其反，但显然箭头函数在 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一样！


提交答案