Vue.jsのv-forについて

Vuejsで配列やオブジェクトなどを、v-forで表現することが多くなりました。

ちょっと基本的な内容をメモっておきたいと思います。

配列で使用する場合

1. v-for = "要素 in 配列"

(要素の変数名は任意)

js

Vue.createApp({
 data:function(){
   return {
     items: ['item-1', 'item-2'],
   }
  },
}).mount('#app')

html

<div id="app">
 <div v-for="item in items">{{ item }}</div>
</div>


result:
<div id="app">
 <div>item-1</div>
 <div>item-2</div>
</div>

2. v-for = "(要素, インデックス) in 配列"

要素、インデックスの変数名も任意

html

<div id="app">
 <div v-for="(item, index) in items">{{ index }}: {{ item }}</div>
</div>


result:
<div id="app">
 <div>0: item-1</div>
 <div>1: item-2</div>
</div>

オブジェクトで使用する場合

1. v-for = "値 in オブジェクト"

html

<div id="app">
 <div v-for="value in object">{{ value }}</div>
</div>


result:
<div id="app">
 <div>ヤマダ</div>
 <div>40</div>
 <div>女</div>
</div>

js

Vue.createApp({
 data:function(){
   return {
     object: {
        name:'ヤマダ',
        age:40,
        gender:'女',
     },
   }
  },
}).mount('#app')

2. v-for = "(値、プロパティ名、インデックス値） in オブジェクト"

html

<div id="app">
 <div v-for="(value, key, index) in object">
    {{ index }}: [{{ key }}] {{ value }}
 </div>
</div>


result:
<div id="app">
 <div>0: [name] ヤマダ</div>
 <div>1: [age] 40</div>
 <div>2: [gender] 女</div>
</div>

以上が、典型的な使用パターンですが、
ただ、効率よく運用する上では下記を意識して使った方がよさそうです。

key属性を付与する。

v-forで注意しないといけないと感じたのがkey属性の付与
Vueでは要素を識別するために、特別なkeyと言う属性を参照し一つ一つの要素を認識しています。
key属性を付与することで、Vueは要素の変更前後の差分を検出し、効率の良い処理を行うことが可能となっています。

js

Vue.createApp({
 data:function(){
   return {
     items: [
        {
          id:1,
          name:'item-1',
        },
        {
          id:2,
          name:'item-2',
        },
     },
   }
  },
}).mount('#app')

html

<div id="app">
 <div v-for="item in items" :key="item,id">
    {{ item.name }}
 </div>
</div>

また、インデックス値をkeyの値として指定することもできますが、
sortやfilterなどによって配列の順番が変更になると意図した出力にならないので注意が必要です。
例：sortで順番が変わった場合、インデックス値0の要素は別の要素になりますが、keyの値は変更していないので、Vueはその要素の変更をスキップします。

まとめ

基本的な記載パターンを描きました。
ただ、v-forで繰り返し処理をする配列またはオブジェクトでは、要素に一意となる値を用意することが理想的です。
順番変更などが生じるようなケースでの取り扱いには注意が必要です。