遇到Elements in iteration expect to have 'v-bind:key' directives.' 這個錯誤

解決方式一：更改VS Code編輯器的vetur配置

錯誤提示:

[vue-language-server] Elements in iteration expect to have 'v-bind:key' directives.
Renders the element or template block multiple times based on the source data

 

使用VS Code 出現如下問題，如圖

Vue 2.2.0+的版本里，當在組件中使用v-for時，key是必須的。

 

更改vetur配置            vscode->首選項->設置->搜索（vetur）

 

"vetur.validation.template": true,

改成：false

 

 

 

解決方式二：設置對應的key

在學習vue過程中遇到Elements in iteration expect to have 'v-bind:key' directives.' 這個錯誤，查閱資料得知Vue 2.2.0+的版本里，當在組件中使用v-for時，key是必須設置的。

 

注意上面key值不要用對象或是數組作為key，用string或number作為key，否則報錯：[Vue warn] Avoid using non-primitive value as key, use string/number value instead.

 

key

當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用“就地復用”策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單復用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。這個類似 Vue 1.x 的 track-by="$index" 。

這個默認的模式是高效的，但是只適用於不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。

為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。理想的 key 值是每項都有的且唯一的 id。這個特殊的屬性相當於 Vue 1.x 的 track-by ，但它的工作方式類似於一個屬性，所以你需要用 v-bind 來綁定動態值 (在這里使用簡寫)：

<div v-for="item in items" :key="item.id">
 <!-- 內容 -->
</div>

建議盡可能在使用 v-for 時提供 key，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。

因為它是 Vue 識別節點的一個通用機制，key 並不與 v-for 特別關聯，key 還具有其他用途，我們將在后面的指南中看到其他用途。