【Vue.js】v-forを使ってセレクトボックスのoptionタグを生成する

この記事では、 v-for を使用してselectタグ内のoptionタグを生成する方法を紹介します。

optionタグのvalueが1から始まるセレクトボックス

下記は値が1から5までのoptionタグを生成する例です。

<template>
    <div>
        <select type="number" name="index" v-model.number="inputIndex">
            <option v-for="n in 5" v-bind:value="n">{{ n }}番目</option>
        </select>
    </div>
</template>

<script>
    export default {
        name: "SomeComponent",

        props: {
            index: {
                type: Number
            }
        },

        data() {
            return {
                inputIndex: this.index
            }
        }
    }
</script>

optionタグのvalueが1以外から始まるセレクトボックス

2000年から始まるセレクトボックスのように、値が1以外から始まる場合は、次のように計算結果を適用することができます。

<template>
    <div>
        <select type="number" name="year" v-model.number="inputYear">
            <option v-for="n in 19" v-bind:value="n + 1999">{{ n + 1999 }}年</option>
        </select>
    </div>
</template>

<script>
    export default {
        name: "SomeComponent",

        props: {
            year: {
                type: Number
            }
        },

        data() {
            return {
                inputYear: this.year
            }
        }
    }
</script>