遇到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 還具備其餘用途，咱們將在後面的指南中看到其餘用途。