在庫数分v-forしたいけど0から始めたい
Vue.jsで配列の中身を取り出すのに便利なv-forですが、普通にfor文のように最大値まで回したい時があります。
<div v-for="n in count"> // var count = 5
<div>{{ n }}</div> // 1 2 3 4 5
</div>
上記のようにcountは5という数値が入ってるとした場合。
順番にカウントアップして5回forが回ってくれます。
ただ0から始まるワケではありません。
<select>タグでプルダウンを作って在庫数から購入数を選択…って時はわざわざ0を最初の行に書いたりしなければなりません。
<select>
<option value="0">0</option>
<option v-for="n in count" v-bind:value="n">{{ n }}</option>
</select
上記のような感じです。まぁ上記のままでも良いんですがとにかく方法がないかな〜と模索しました。
<div v-for="(n,i) in count"> // var count = 5
<div>{{ i }}</div> // 0 1 2 3 4
</div>
0から始める方法はindexを取れば行けますが今度は5まで回ってくれません。
おしい(^_^;
<div v-for="(n,i) in (count+1)"> // var count = 5
<div>{{ i }}</div> // 0 1 2 3 4 5
</div>
そこで考えたのが在庫数（と仮定）に1足して回せばええんでは？という感じです。
ごにょごにょした感じなのでオススメしません(^_^;
素直に<option value="0">0</option>書いた方がいい気がします。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="forTest">
<div v-for="(n,i) in (count+1)">
<div>{{ i }}</div>
</div>
</div>
<script>
new Vue({
el : '#forTest',
data:{
'count':5,
},
});
</script>
</body>
</html>
どうしても…って時にはコレしかないのかなぁ？
