iT邦幫忙

0

todoList checkbox顯示錯誤

大家好,我用vue做了一個todoList
但是我發現我在completed分頁跟undo分頁的時候,點選checkbox都會出現顯示錯誤
https://codepen.io/sungchian/pen/wverRoQ?editors=1111

我真的不知道是哪裡有問題...code也是參考別人加以改良,大致上沒改太多

請教各位了,謝謝

https://ithelp.ithome.com.tw/upload/images/20210916/20112075EWYYnMmgLX.png
比如說我要點擊airpods這個項目的checkbox
照理來講他會跑到UNDO頁籤,然後checkbox會變沒有選取,然後我點擊airpods之後
https://ithelp.ithome.com.tw/upload/images/20210916/20112075oWbInJj4Yb.png

不相關的Airpods Pro就會變成沒有選取狀態,我撈vue裡面的airpods pro資料是正確的(true) <- true應該為勾選,但是顯示出來是錯誤的(沒有打勾)

再補充一下
https://ithelp.ithome.com.tw/upload/images/20210916/201120753tc6RtVyHM.png

frank575 iT邦新手 4 級 ‧ 2021-09-15 22:58:24 檢舉
不明白顯示錯誤指的是什麼?稍微點了一下感覺是正常的呀
補充說明了謝謝

2 個回答

1
frank575
iT邦新手 4 級 ‧ 2021-09-16 16:52:49
最佳解答

這是你沒綁 key 的關係,注意 for 渲染的 element 一定要綁 key,不建議綁 index, 在特殊操作上如拖曳排序等會有渲染問題

li(v-for="todo in filterTodos" :class="{ active: todo.completed }") 

// 改成
li(v-for="todo in filterTodos" :class="{ active: todo.completed }" :key="todo.name") 

然後 name 也是不建議綁的,因為可能會有重複 key 的問題,建議是新增一筆時,隨機生成一個 hash key 上去綁,但如果你是從後端 db 撈資料,綁 id 即可,因為 id 通常是唯一

哇...我的救命恩人!
都會下意識的無視綁key值,到時候新增一筆資料我再新增一組id
謝謝~~~~

0
海綿寶寶
iT邦大神 1 級 ‧ 2021-09-16 15:55:49

我測了一下
AIRPODS PRO 變成 unchecked 的原因是「他是 AIRPODS 的下一筆」
似乎是更新畫面顯示時的小瑕疵
只要再點一次 completed 讓他「重新整理」就會正常了
https://ithelp.ithome.com.tw/upload/images/20210916/20001787bh6kGjNYtn.png

我不會 vue,也找不到在那裡更新顯示
所以答案是



/images/emoticon/emoticon61.gif

哈哈哈謝謝你願意花時間來看我的問題!

我要發表回答

立即登入回答