Vue.jsも少しずつ勉強していこうと思います。
そのままでも便利なv-forですが、何回目のループかを知りたい場合があります。
その場合もv-forだけで対応可能です。具体的にはv-forで展開されたオブジェクト配列を受け取る時に追加してインデックス（カウンタ）を受け取ることができます。
百聞は一見に如かず。
サンプルを作ったので、良ければ見ていってくださいね。
スクリプト（Vue.js ｖ-forでインデックス（カウンタ）を付けるサンプル）
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var app = new Vue({ el: '#app', data: { items: [ { name : "商品01", price: "¥100"}, { name : "商品02", price: "¥200"}, { name : "商品03", price: "¥300"}, { name : "商品04", price: "¥400"}, { name : "商品05", price: "¥500"} ] } }) |
v-forでループさせるオブジェクトを作っておきます。
HTML（Vue.js ｖ-forでインデックス（カウンタ）を付けるサンプル）
|
1 2 3 4 5 |
<div id="app"> <p v-for="(item, index) in items"> {{index + 1}} : {{item.name}} : {{item.price}} </p> </div> |
ポイントは2行目の v-for="(item, index) in items" ですね。
こうすることでitemsからオブジェクト配列を受け取るときにインデックス（カウンタ）を受け取ることができます。
受け取ったインデックス（カウンタ）は変数indexで受け取ることができるので、以降はこの変数を利用することが可能です。
便利ですね！
See the Pen Vue.js ｖ-forでインデックス（カウンタ）を付けるサンプル by clue-design (@clue-design) on CodePen.0
コード変更や、大きな画面でみたい場合はこちらから。
