为什么v-bind属性不能正常工作？
为什么v-bind属性不能正常工作？
提问于 2018-09-24 11:04:48
因此，我正在使用VueJS创建一个简单的待办事项列表应用程序：
<template>
<div>
<br/>
<div id="centre">
<div id="myDIV" class="header">
<h2 style="margin:5px">My To Do List</h2>
<input type="text" id="myInput" v-model="text" v-on:keyup.enter="AddNote()" placeholder="Title...">
<span v-on:click="AddNote()" class="addBtn">Add</span>
</div>
<ul id="myUL">
<li v-on:click="ToggleClass(index)" v-for="(item, index) in array" v-bind:class="{ checked: isChecked[index] }">
{{item}}
<span class="close">×</span>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "Notepad",
data() {
return {
array: [],
text: "",
isChecked: []
}
},
methods: {
AddNote: function() {
if(this.text!=="") {
this.array.push(this.text);
this.isChecked.push(false);
this.text = "";
}
},
ToggleClass(index) {
console.log(index);
this.isChecked[index]=!this.isChecked[index];
console.log(this.isChecked);
}
}
}
</script>但是，当我单击某一项时，当我单击它时，v-bind属性并不绑定该类。相反，当我在上面的文本字段中键入某些内容时，它会绑定它。
有人能帮忙吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-24 11:22:35
isChecked数组不是反应性的，vue无法检测更改。您必须触发它，例如通过$set或splice。
在这里阅读更多相关信息：https://v2.vuejs.org/v2/guide/list.html#Caveats
您可以这样修改代码：
ToggleClass(index) {
console.log(index);
this.isChecked.splice(index, 1, !this.isChecked[index])
// or this.$set(this.isChecked, index, !this.isChecked[index])
console.log(this.isChecked);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52477949
复制相关文章
相似问题
腾讯云开发者
