Key 與 ID - daniel-qa/Vue GitHub Wiki

• 問題:

concole 出現 重覆 key 的警告

vue.js:634 [Vue warn]: Duplicate keys detected: '1'. This may cause an update error.

=> 這與 Vue 的警告檢查機制有關

抓資料當然只能用 id（資料主鍵）

key 只是 Vue 畫面層的定位工具，跟資料查詢是兩個世界

 v-for="row in mappingData"
:key="`semester-map-${rowIndex}`"

row.source === semester.id

Vue 用 key 你用 id

兩邊各司其職，完全不衝突。

為什麼不能拿 key 當資料主鍵？

因為 key 可能是：

semester-map-0 semester-map-1

這只是 UI row identity 對資料世界沒有任何意義。

正確心法

id = 業務主鍵
key = DOM 主鍵