在庫数分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>
どうしても…って時にはコレしかないのかなぁ?