tags: Vuejs

v-for ✐

v-for 指令可以使我們方便的渲染 Array 成為列表，在渲染列表相關的 data 時十分方便，並且 v-for 除了 Array，也支持 Object、number、string、Iterable 其餘四種值。

Object

v-for 渲染物件時，順序依照 Object.keys() 順序遍歷，在不同的引擎中不保證有一樣的結果，這點需要注意。

v-for 使用上需要注意的細節

v-for 上所渲染的資料若是更動 順序，DOM 元素在渲染時，並不會隨 順序 更動，而是就地更新每個元素，這樣的渲染更為高效，但是如同前幾章節所述，在遇到臨時 DOM 狀態如 input value 時，input 不會隨資料更動而被替換：

<form>
  <p v-for="(item, index) in list">
    <label for="item">{{ item }}:</label>
    <input type="text" id="item">
  </p>
</form>

這時候透過給定 key 便可以解決此問題，不建議使用 index 作為 key 值，舉例來說下方範例若是使用 splice 抽換 Array 資料中的某個值為新的值，由於新舊值 index 相同，仍然會有 input 不會隨資料更動而被替換的問題。

<form>
  <p v-for="(item, index) in list" :key="index">
    <label for="item">{{ item }}:</label>
    <input type="text" id="item">
  </p>
</form>

如下方，建議使用唯一的值作為 key 值，但若是渲染的元素很單純，v-for 本身的 就地更新 高效渲染也有其優勢。

<form>
  <p v-for="(item, index) in list" :key="item.id">
    <label for="item">{{ item }}:</label>
    <input type="text" id="item">
  </p>
</form>

以上為此次內容，感謝看到這裡的你，我們明天見。

若是文中有任何錯誤、錯字、想討論的內容，歡迎各位大大不吝鞭笞指正、交流分享，筆者不慎感激 ✦ ✦ ✦

▶︎ 筆者 github：https://github.com/YUN-RU-TSENG
▶︎ 老王賣瓜之筆者另一篇鐵人：每天來點 CSS Specification

▶︎ 倘若不斷向深處扎根，似乎就能茁壯成長 - RM

參考資料：

1. Vuejs.org 2.x