我从Udemy课程学习VueJS。我正在进行其中一项练习,非常简单。但是,我一直面临着一个问题,即Vue错误输出并且仅在打破之前应用了一次点击的预期更改。我在发布之前检查了我发现的每个相关的SO帖子,以及课程的Q& A部分,所以很明显我做了一些小/愚蠢的错误但找不到的地方。
期望:点击"开始效果"按钮,并以1秒为间隔查看添加到.highlight
div的#effect
类。
发生了什么:点击"开始效果"按钮,并看到在vue错误输出之前添加的.highlight
类,其中包含一个无用的(对我而言)错误消息。
'use-strict';
document.addEventListener('DOMContentLoaded', () => {
const vm = new Vue({
el: '#exercise',
data: {
hasEffect: false
},
computed: {
effectClasses: function() {
return {
highlight: this.hasEffect
};
}
},
methods: {
startEffect: function() {
var that = this;
console.log(that.hasEffect);
setInterval(function() {
that.hasEffect = !that.hasEffect;
console.log(that.hasEffect);
}, 1000);
}
}
});
});

#effect {
width: 100px;
height: 100px;
border: 1px solid black;
}
.highlight {
background-color: red;
width: 200px !important;
}
.shrink {
background-color: gray;
width: 50px !important;
}

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="exercise">
<!-- 1) Start the Effect with the Button. The Effect should alternate the "highlight" or "shrink" class on each new setInterval tick (attach respective class to the div with id "effect" below) -->
<div>
<button @click="startEffect">Start Effect</button>
<div id="effect" :class="effectClasses"></div>
</div>
</div>
&#13;
输出的错误: