【Vue 2】リストレンダリング
Vue 2
2021/04/28
基本構文
配列の要素をすべて表示するためには、v-forを使用します。
v-for="item in items"とすることで、itemsの要素が順にitemに格納され展開されます。
またv-forを使用する際は、要素を一意に識別するためのデータをkeyとしてバインドすることが推奨されています。
バインドしたデータが重複する場合はエラーとなります。
HTML
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>JavaScript
data: {
items: ['Tanaka', 'Yamada', 'Suzuki']
}結果
<ul>
<li>Tanala</li>
<li>Yamada</li>
<li>Suzuki</li>
</ul>またv-for="(item, index) in items"のように、2 つ目の引数を指定することで配列のインデックスを取得できます。
HTML
<ul>
<li v-for="(item, index) in items" :key="index">{{ index }}. {{ item }}</li>
</ul>結果
<ul>
<li>0. Tanala</li>
<li>1. Yamada</li>
<li>2. Suzuki</li>
</ul>指定回数の繰り返し
配列を使用せず、指定回数分繰り返しを行いたい場合は以下のようにします。
HTML
<ul>
<li v-for="n in 3" :key="n">{{ n }}</li>
</ul>結果
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>オブジェクトへの応用
v-forは、配列だけでなくオブジェクトに対して使用することができます。
この場合、引数の 1 つ目がプロパティ、2 つ目が値になります。 インデックスを使用したい場合は 3 つ目を指定します。
HTML
<ul>
<li v-for="(name, value) in obj" :key="name">{{ name }}: {{ value }}</li>
</ul>JavaScript
data: {
obj: {
name: 'Tanaka',
age: 25,
gender: 'Male'
}
}結果
<ul>
<li>name: Tanaka</li>
<li>age: 25</li>
<li>gender: Male</li>
</ul>表示制御
v-forの中で表示する要素を限定したい場合は、算出プロパティ（computed）を使用します。
配列の要素を絞り込む場合はfilterを使用します。
HTML
<ul>
<li v-for="item in males" :key="item.name">{{ item.name }}</li>
</ul>JavaScript
data: {
items: [
{ name: 'Tanaka', age: 25, gender: 'Male' },
{ name: 'Yamada', age: 24, gender: 'Male' },
{ name: 'Suzuki', age: 27, gender: 'Female' },
{ name: 'Sato', age: 22, gender: 'Female' },
]
},
computed: {
males() {
return this.items.filter(e => e.gender === 'Male')
},
females() {
return this.items.filter(e => e.gender === 'Female')
}
}結果
<ul>
<li>Tanaka</li>
<li>Yamada</li>
</ul>表示制御をするためにv-ifを使用するのは非推奨とされています。
よって以下のような記述は NG です。
HTML
<ul>
<li v-for="item in items" :key="item.name" v-if="item === 'Male'">{{ item.name }}</li>
</ul>配列操作
以下のように配列の要素を変更するメソッドを用意します。
JavaScript
data: {
items: ['Tanaka', 'Yamada', 'Suzuki']
},
methods: {
changeItems() {
this.items[1] = 'Sato'
}
}changeItems()のメソッドが実行されたとしても、v-forで表示した内容は変化しません。
Vue.js では、データの変更を監視しているのですが、特定のメソッドによる変更か配列そのものを置き換えない限りは変更が検知されません。 ゆえに上記のような変更は検知されません。
配列は以下のメソッドを使って変更を行うようにします。
| メソッド | 説明 |
|---|---|
push() | 末尾追加 |
pop() | 末尾取得 |
shift() | 先頭取得 |
unshift() | 先頭追加 |
splice() | 置き換え、削除 |
sort() | ソート |
reverse() | 逆順 |
上の例は、以下のようにすることで目的の処理となります。
JavaScript
changeItems() {
this.items.splice(1, 0 'Sato')
}