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