Waplusテックチームブログ

よく参照するのをわかりやすくまとめよう！

在庫数分v-forしたいけど0から始めたい

by · 2019年6月26日

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>

どうしても…って時にはコレしかないのかなぁ？

タグ:

おすすめ