【JavaScript・Vue.js】v-for="num in 10"のnumは1から始まる。

基本的なことかつ、ドキュメントにも書いてありますがやや癖があるので知っておいたほうがいいという話。

環境

Vue2系（1系以前もおそらく同じ）

内容

vue.jsのv-forディレクティブは、配列だけでなく整数値もinの後に取ることができます。

https://jp.vuejs.org/v2/guide/list.html#%E7%AF%84%E5%9B%B2%E4%BB%98%E3%81%8D-v-for

コメントの表示を5件までにしたい、というような時など数を固定したい時には便利ですね。 （データを返すAPI側で制御しろよという話は棚に上げますが。）

普通に使う文には便利なのですが、通常のv-forのindexを使う時は0から数値が始まりますが、整数値を指定した時は1から始まるので、単純移植する際は挙動の注意が必要です。

// indexは0から始まる
<div v-for index, value in ['a', 'b', 'c', 'd']>
  <span>index</span>
  <span>value</span>
</div>

// indexは1から始まる
<div v-for index in 10>
  <span>index</span>
  <span>A[index]</span>
</div>

そのため、ある配列の長さで判定→その後にループを回すような処理がある場合は以下のようにするとうまく回ります。

※そもそも算出プロパティを使用するなどしてv-for部分で判定はしないほうがいいと後で気が付きましたが…