Ich versuche, mit VueJS (2.x) eine clientseitige To-Do-Liste zu erstellen. Das ist mein HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To-do List</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div id="app">
<h1>To-do List</h1>
<h2>Completed Tasks!</h2>
<ul>
<li v-for="item in complete">{{ item.description }}<input type="checkbox" :checked="item.done" @change="item.done = false"></li>
</ul>
<h2>Uncompleted Tasks!</h2>
<ul>
<li v-for="item in uncomplete">{{ item.description }}<input type="checkbox" :checked="item.done" @change="item.done = true"></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.13/dist/vue.js"></script>
<script type="module" src="scripts/app.js"></script>
</body>
</html>
Dann habe ich in scripts/app.js Folgendes gemacht:
'use strict'
let app = new Vue({
el : "#app",
data : {
tasks: [
{ description: 'Say Hello', done: true },
{ description: 'Review Code', done: false },
{ description: 'Read Emails', done: false },
{ description: 'Reply to Emails', done: false },
{ description: 'Wash The Dishes', done: true },
{ description: 'Stop Working', done: true },
]
},
computed : {
complete : function() {
return this.tasks.filter(task => task.done === true);
},
uncomplete : function() {
return this.tasks.filter(task => task.done === false);
}
}
});
Mein Problem ist einfach: Wenn ich den Status eines Kontrollkästchens in einer bestimmten Liste ändere (aktiviere oder deaktiviere), ändert sich auch der Status des Kontrollkästchens direkt danach.
Ich verstehe nicht, warum das passiert und wie ich es beheben kann. Wenn mir jemand sagen könnte, warum das passiert (damit ich nicht hierher zurückkommen muss, wenn sich v-for/switch-state schlecht verhält) und wie ich es beheben kann, wäre das großartig!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
data中最好使用Function，而不是Object，否则可能会导致更新错误。因为
Function仅在组件定义中使用时才被接受。// wrong data: { tasks: [] } // correct data() { return { task: [] } }compulated属性，该属性默认只有一个Compulated Getter。如果要处理compated属性，请给出计算设置器到它。// wrong computed: { complete(){ return this.tasks.filter(task => task.done === true); }, } // right computed: { complete: { get() { return this.tasks.filter(task => task.done === true); }, set(value) { this.task.forEach((task, index) => { let matched = value.find(({ description }) => description === task.description); if(matched) { this.task[index] = matched; } }); } } }v-for绑定值，因为 vue2 无法识别数组中的更改。new Vue({ el: "#app", data() { return { tasks: [ { description: 'Say Hello', done: true }, { description: 'Review Code', done: false }, { description: 'Read Emails', done: false }, { description: 'Reply to Emails', done: false }, { description: 'Wash The Dishes', done: true }, { description: 'Stop Working', done: true }, ] }; }, computed : { complete: { get() { return this.tasks.filter(task => task.done === true); }, set(value) { this.task.forEach((task, index) => { let matched = value.find(({ description }) => description === task.description); if(matched) { this.task[index] = matched; } }); } }, uncomplete: { get() { return this.tasks.filter(task => task.done === false); }, set(value) { this.task.forEach((task, index) => { let matched = value.find(({ description }) => description === task.description); if(matched) { this.task[index] = matched; } }); } } } });