前回までの記事はこちら↓
条件分岐ディレクティブ（下記２記事）
その他のディレクティブ
v-for
配列に基づいて描画する。
配列をそのままリスト表示
dataで指定した配列に基づいてList表示させる方法。
v-for=”word in greeting”
黄色マーカの部分は、配列の中身を変数に格納しています。list表示する時は、変数を使って中身を抜き取ってきます。
変数のつけ方は、単数形を用いるケースが多いです。（例は単数ではないです）
<div id="app">
<ul>
<li v-for="word in greeting">{{word}}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
greeting: ['Hello', 'こんにちは', 'Aloha']
}
})
</script>
配列順を取得する
v-forは第２引数を使って配列の順を取得する事ができる。
v-for=”(word, i) in greeting”
変数を（）で囲い、カンマ(,)で区切って第２引数を追加する。
第２引数の変数名は何でもOKです。
<li v-for="(word, i) in greeting">{{i}}：{{word}}</li>
オブジェクトを表示させる
配列ではなく、オブジェクトをリスト表示させる時にもv-forが有効です。
オブジェクトを一覧表示させる時は、配列と同様に変数に格納する。
v-for=”value in object”
<div id="app">
<ul>
<li v-for="value in object">{{value}}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object:{
fruit:'りんご',
price:150
}
}
})
</script>
オブジェクトの場合、第２引数でkeyの取得ができる。
v-for=”(value,key) in object”
<li v-for="(value,key) in object">{{key}}:{{value}}</li>
第３引数でインデックスを取得する事ができる。
v-for=”(value,key,i) in object”
<li v-for="(value,key,i) in object">{{key}}:{{i}}:{{value}}</li>
v-forにkey属性を付与する
v-forにはkey属性を付与することが推奨されています。
なぜkey属性を付与するか、公式サイトにはこのように書かれています。
Vue が
https://jp.vuejs.org/v2/guide/list.html#%E7%8A%B6%E6%85%8B%E3%81%AE%E7%B6%AD%E6%8C%81v-forで描画された要素のリストを更新する際、標準では “その場でパッチを適用する” (in-place patch) 戦略が用いられます。
—–省略——
この標準のモードは効率がいいです。しかしこれは、描画されたリストが子コンポーネントの状態や、一時的な DOM の状態に依存していないときにだけ適しています
https://jp.vuejs.org/v2/guide/list.html#%E7%8A%B6%E6%85%8B%E3%81%AE%E7%B6%AD%E6%8C%81
難しい‥‥（笑）
Vueに「こことここは配列[0]の要素ね！こことここは配列[1]の要素ね！」といちいち紐づけさせないと、更新した時に一部は更新されているけども、一部の要素は更新されないといった事が発生してしまいます。
それを防ぐためにkey属性を付与します。
key属性は一意の値である必要があります。
keyの指定は、v-bindを使います。
※v-bindの省略は[:]
※v-bindについての記事はこちら
<div v-for="word in greeting" :key="word">
key属性を使用する上での注意点
1.HTMLのtemplateタグは使用できない。
2.第2引数のインデックスをkeyに使用しない。
