Saya cuba membuat senarai tugasan pihak pelanggan menggunakan VueJS (2.x). Ini HTML saya:
<!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>
Kemudian dalam skrip/app.js saya melakukan ini:
'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);
}
}
});
Masalah saya mudah: apabila saya menukar keadaan kotak pilihan dalam senarai yang diberikan (tandakan atau nyahtandakannya), kotak pilihan serta-merta mengikutinya turut menukar keadaan.
Saya tidak faham mengapa ini berlaku dan bagaimana untuk membetulkannya. Jika sesiapa boleh memberitahu saya mengapa perkara ini berlaku (jadi saya tidak perlu kembali ke sini apabila v-for/keadaan suis tidak berkelakuan baik) dan cara membetulkannya, itu bagus!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
data中最好使用Function，而不是ObjectJika tidak, ia boleh menyebabkan ralat kemas kini.Kerana
Functionhanya diterima apabila digunakan dalam definisi komponen.// wrong data: { tasks: [] } // correct data() { return { task: [] } }compulated属性，该属性默认只有一个Compulated Getter。如果要处理compated属性，请给出计算设置器terus kepadanya.// 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-forkerana vue2 tidak mengenali perubahan dalam tatasusunan.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; } }); } } } });