我正在嘗試製作一個使用 VueJS (2.x) 的客戶端待辦事項清單。這是我的 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>
然後在scripts/app.js 中我這麼做了:
'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); } } });
我的問題很簡單:當我更改給定清單中複選框的狀態(選中或取消選中它)時,緊接在後的複選框也會切換狀態。
我不明白為什麼會發生這種情況以及如何解決它。如果有人能告訴我為什麼會發生這種情況(這樣我就不必在 v-for
/switch-state 行為不端時回到這裡)以及如何修復它,那就太棒了!
P粉3121957002024-03-30 21:46:29
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; } }); } } } });
ssscccTo-do List
Completed Tasks!
- {{ item.description }}
Uncompleted Tasks!
- {{ item.description }}