J'essaie de créer une liste de tâches côté client en utilisant VueJS (2.x). Voici mon 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>
Puis dans scripts/app.js j'ai fait ceci :
'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);
}
}
});
Mon problème est simple : lorsque je change l'état d'une case à cocher dans une liste donnée (la cocher ou la décocher), la case qui la suit immédiatement change également d'état.
Je ne comprends pas pourquoi cela se produit et comment y remédier. Si quelqu'un pouvait me dire pourquoi cela se produit (pour que je n'aie pas besoin de revenir ici lorsque v-for/switch-state se comporte mal) et comment y remédier, ce serait génial !
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
data中最好使用Function，而不是ObjectSinon, cela pourrait provoquer des erreurs de mise à jour.Parce que
Functionn'est accepté que lorsqu'il est utilisé dans la définition d'un composant.// 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-forcar vue2 ne reconnaît pas les modifications dans le tableau.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; } }); } } } });