在计算的vue中使用箭头功能不起作用
我正在学习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}
}
}
我使用错误的语法吗？
问题答案：
您遇到此错误是因为箭头函数不会绑定this到您要为其定义计算属性的vue实例。如果要methods使用箭头功能进行定义，也会发生同样的情况。
不要在实例属性或回调上使用箭头函数（例如vm.$watch('a',newVal=>this.myMethod()))，由于箭头函数绑定到父上下文，因此这将不是您期望的Vue实例，并且this.myMethod将是未定义的）。
-
问题内容： 当ES6 Arrow函数似乎无法为使用prototype.object的对象分配功能时。请考虑以下示例： 在对象定义中显式使用arrow函数是可行的，但将Object函数与Object.prototype语法一起使用却不能： 就像概念证明一样，将Template字符串语法与Object.prototype语法一起使用确实可以： 我是否缺少明显的东西？我觉得示例2应该在逻辑上起作用，但是
-
问题内容： 下面的代码在IE 11中不起作用，它在控制台中引发语法错误 使用二部图进行可视化 此代码导致上述声明中的问题 问题答案： 您正在使用箭头功能。IE11不支持它们。使用函数代替。 这是Babel将其翻译成ES5的内容：
-
问题内容： 我正在将ReactJS与Babel和Webpack一起使用，并使用ES6以及针对箭头功能的建议类字段。我知道箭头函数通过不重新创建每个呈现的函数（类似于构造函数中的绑定工作方式）来使事情更高效。但是，我不确定100％是否正确使用了它们。以下是我的代码在三个不同文件中的简化部分。 我的代码： Main.js SecondClass.js ThirdClass.js 题： 我上面的代码使用
-
问题内容： 我正在将ReactJS与Babel和Webpack一起使用，并使用ES6以及针对箭头功能的建议类字段。我知道箭头函数通过不重新创建每个呈现的函数（类似于构造函数中的绑定工作方式）来使事情更高效。但是，我不确定100％是否正确使用了它们。以下是我的代码在三个不同文件中的简化部分。 我的代码： Main.js SecondClass.js ThirdClass.js 题： 我上面的代码使用
-
问题内容： 我在使用胖箭头功能时遇到了一些问题。如果该函数不是匿名函数，它将抱怨语法并且不会编译。 这个： 给我： 它指向等号（handleItemClick’=’）。 但是，这很好用： 我的webpack配置是否有问题，或者我缺少什么？感谢任何提示。 问题答案： 您正在尝试使用不属于ES6且es2015未涵盖的class字段，并对预设进行反应。 您可以使用Class属性transform bab
-
问题内容： 我在一个Angular示例中遇到了这个构造，我想知道为什么选择了这个构造： 我了解变量_表示不在乎/不使用，但是由于它是唯一的变量，因此没有任何理由更喜欢使用_： 当然，输入的字符数不能少于一个。在我看来，（）语法可以更好地传达意图，并且还更具体地说明类型，因为否则我认为第一个示例应该看起来像这样： 万一重要，这是使用它的上下文： 问题答案： 之所以可以使用此样式（可能是在此处使用该样