【Vue.js】リストレンダリング【v-for】

Vue.jsのリストレンダリング

v-forの使い方

一般的に<li v-for=”i in range”></li>で使われることが多いかもしれませんが
<div v-for=”i in range”></div>でも利用可能です。

<div v-for=”i in range”></div> では、
・iは0から始まる、１ずつ増加する数
・rangeはターゲットのリストあるいは数字

ターゲットがリストか数字かでiが異なる

<div v-for=”i in range”></div> を例に出して解説です。
rangeが3の場合はiが1,2,3の3回描画されたら終了です。
rangeがrange:[‘a’,’b’,’c’]のような配列の場合はiが0,1,2の3回描画されたら終了です。

初期値、増加量の変更は不可

調べた限りでは初期値の変更は不可でした。
増加量の変更も不可でした。
やりたいことが出来ない場合はターゲットのリストを修正してv-forを使うのが一般的かと思います。

v-for利用サンプルコード

See the Pen v-forの利用法 by Yishida (@yishida05) on CodePen.

サンプルコード解説

・数字のループ
　単純に数字のループです。前述したとおり1から始まります。
・配列のループ
　配列のループです。前述した通り0から始まります。
　dataが配列の要素を表しています。
・第2引数のindex
　配列のループに第2引数のindexを追加したコードです。
　配列の要素に加え、indexはその名の通り配列の番号を表しています。
・keyの指定
　第2引数のindexを用いたv-forに:key=indexを利用しています。
　ただ、これは余り好ましくない利用方法です。
　配列が追加削除されない固定値であれば問題ないですが、変化が起きる場合はkeyを利用することで不具合が起きる可能性があります。
　詳しく記載されていた方が居たのでリンクを貼ります。
　https://qiita.com/FumioNonaka/items/d1d9c9335116426a8316
・辞書型への利用例
　jsonListのindexが文字列であることを使った表現方法です。
　dataで取得した文字列をjsonList[data]と記述することによってjsonListにあるインデックスに該当するオブジェクトを表示しています。（変数名が厳密にはListじゃないかもしれないが・・・まあいいか）

雑記

keyに関してはes-lintで怒られるからって理由だけで:key=ってつけてたけど
不具合起きるらしいこと聞いてから固定値のリスト以外には使わないようにしています・・・