Vue.js の v-for を使って、動的に今年〜100年前のセレクトボックスを作ってみましょう。

完成イメージ

まずは、完成イメージを見てみましょう。
セレクトボックスを確認すると、下記が確認できます。

今年〜100年前が入っている
初期値が設定されている（ selected されている）

See the Pen Vue.jsのv-forで今年〜100年前のセレクトボックスを作り、初期値（selected）を良い感じに設定する by maeco (@maeco) on CodePen.

実際に作ってみよう

それでは、実際に作ってみましょう。
いきなり完成形を作るのではなく、わかるところから少しづつ作っていきます。

[STEP 1] ベタ書きでセレクトボックスを作る

まずは、v-for を使わないセレクトボックスを作ります。ポイントは２点。

select タグに v-model
data で初期値を設定

See the Pen Vue.jsのv-forで今年〜100年前のセレクトボックス・・・1 by maeco (@maeco) on CodePen.

※ 100個も `option` を書くのは面倒なので５個にしています

これは、公式ドキュメントのフォーム入力バインディングに書かれているコードを少し変更しただけです。

select に、バインディングするプロパティ名（ data の selected ）を指定し、プロパティ値に初めに選択したい値を設定しています。

[STEP 2] `v-for` で書き直す

先ほどのを v-for を使って書き直したのがこれ。ポイントは２点。

data に配列 list を作る
:key を忘れない

See the Pen Vue.jsのv-forで今年〜100年前のセレクトボックス・・・2 by maeco (@maeco) on CodePen.

data に list プロパティを用意して、配列で option に設定する値を入れています。
それを v-for で回すのですが、:key 属性を忘れずにつけましょう。

[STEP 3] `list` を動的に作り変える

今度は、基準の年を設定して、それを利用して list プロパティを作っていきます。ポイントは３つ。

list を空の配列にする
基準の年を設定
for で指定回数繰り返す

See the Pen Vue.jsのv-forで今年〜100年前のセレクトボックス・・・3 by maeco (@maeco) on CodePen.

・list を空の配列にする
後からデータを入れたいので、list プロパティを空の配列 [] にしましょう。
そして、created 関数を作成します。この中に色々と処理を書いていきます。

・基準の年を設定
とりあえず、基準の年を変数（定数）で設定します。

const year = 2015

・for で指定回数繰り返す
その年を基準に for で 5回、 list 配列に push します。

for (let i = 0; i < 5; i++) {
  this.list.push(year + i)
}

push は、配列の末尾に値を追加するメソッドです。
for を回す度に次の様に変化していきます。

list: [2015]                         // 1回目 2015 + 0
list: [2015, 2016]                   // 2回目 2015 + 1
list: [2015, 2016, 2017]             // 3回目 2015 + 2
list: [2015, 2016, 2017, 2018]       // 4回目 2015 + 3
list: [2015, 2016, 2017, 2018, 2019] // 5回目 2015 + 4

[STEP 4] 今年から〜の配列に変更する

さて、では一気に仕上げを行う。ポイントは3つ。

基準の年を今年にする
push ではなく unshift を使う
初期値を良い感じにする

See the Pen Vue.jsのv-forで今年〜100年前のセレクトボックスを作り、初期値（selected）を良い感じに設定する by maeco (@maeco) on CodePen.

・基準の年を今年にする
STEP3 では、基準の年を直接指定していましたが、現実的ではありません。
Javascript の Date オブジェクトを使い、今年を取得します。
次のどちらの書き方でも大丈夫です。

// 2行で書くと
const today = new Date()   // 今日を取得
year = today.getFullYear() // 今年を取得

// 1行で書くと
const year = new Date().getFullYear()

・push ではなく unshift を使う
STEP3では、push で配列の末尾にプラスした値を追加していきました。
今度は、マイナスした値を先頭に追加していきます。

unshift は、配列の先頭に値を追加するメソッドです。
for を回す度に次の様に変化していきます。

list: [2019]                         // 1回目 2019 - 0
list: [2018, 2019]                   // 2回目 2019 - 1
list: [2017, 2018, 2019]             // 3回目 2019 - 2
list: [2016, 2017, 2018, 2019]       // 4回目 2019 - 3
list: [2015, 2016, 2017, 2018, 2019] // 5回目 2019 - 4

そして this.num の回数（今回は100回）だけループを繰り返しています。
変更の可能性も考えられるので、定数として別で管理した方が良さそうです。

・初期値を良い感じにする
初期値もベタ書きでは柔軟性がありません。
リストの３/５くらいを自動で選択するようにします。

// 分数も良いけど・・・
this.selected = this.list[this.list.length * 3 / 5]

// 私はこちらの方がシンプルで好き
this.selected = this.list[this.list.length * 0.6]

これで完成です。