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-modeldataで初期値を設定
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]
これで完成です。