値の変更により、和暦が変更されて表示される理由について

Question

vue.jsにて、生年月日をSELECT要素で表示する処理を調べながら実装していたのですが、一点疑問な点があり質問させて貰いました。

<template>
  <div>
      <p>性別</p>
      <input type="radio" value="man" id="man" name="gender" v-model="gender">
      <label for="man">男性</label>
      <input type="radio" value="woman" name="gender" v-model="gender">
      <label for="man">女性</label>
      <p>生年月日</p>
      <select id="year" v-model="year">
        <option v-for="nengo in nengoes" :key="nengo.year" :value="nengo.year">{{ nengo.label }}</option>
      </select>
      <label>年</label>
      <p>test:{{ gender }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      gender: '',
      year: 1990,
      month: 1,
      date: 1,
      days_max: '',
      nengoes: []
    }
  },
  mounted() {
    this.nengoes = this.genereate()
  },
  methods: {
    genereate() {
      const nengoes = []
      for (let y = 2021; y > 1920; y--) {
        if (y > 2018) {
          nengoes.push({ year: y, label: `${y} (令和${y - 2018}年)` })
        } else if (y > 1988) {
          nengoes.push({ year: y, label: `${y} (平成${y - 1988}年)` })
        } else if (y > 1925) {
          nengoes.push({ year: y, label: `${y} (昭和${y - 1925}年)` })
        } else if (y > 1911) {
          nengoes.push({ year: y, label: `${y} (大正${y - 1911}年)` })
        }
      }
      return nengoes
    }
  }
}
</script>

data()内のyear: 1990の値をyear: 2020などと変更すると、初期のセレクトボックスの表示は「2020(令和)」と変更されて表示されます。
こちら:value="nengo.year"はnengoes配列から参照している為、yearの値を変更しても、配列の最初のインデックスを参照している為、影響がないと思うのですが、何故、和暦が変更されて表示されるのでしょうか。
こちらの疑問点につきまして、どなたかご助言頂けましたら幸いです。

Answer 1

配列の最初のインデックスを参照している為、影響がないと思うのですが、

違います。v-model="year"を指定しているため、ドロップダウンの初期値はdata().yearの値を持つものが選ばれます。「先頭」とは限りません。

Comments

[maisumakun]

もし回答が疑問点を外しているようでしたらお知らせください。

[jjj001]

ご回答ありがとうございます。
> v-model="year"を指定しているため、ドロップダウンの初期値はdata().yearの値を持つものが選ばれます。
正直な所、ここの部分が何故そうなるのかが分からないです

[maisumakun]

もともと、<select>に「JavaScriptで」valueを指定すると、選択肢を変えることができるという仕組みがあります。

[jjj001]

ご返信ありがとうございます。
> もともと、<select>に「JavaScriptで」valueを指定すると、選択肢を変えることができるという仕組みがあります。
こちらですが、valueを指定しているのは「:value="nengo.year"」であり、dataプロパティで指定している「year」ではないのではないでしょうか...?

[maisumakun]

> valueを指定しているのは「:value="nengo.year"」であり、dataプロパティで指定している「year」ではないのではないでしょうか...?

そちらは<option>に対するvalueの指定（各選択肢が持つ値の設定）です。<select>のvalue（ドロップダウンの選択肢の指定）とは別物です。

[jjj001]

> そちらは<option>に対するvalueの指定（各選択肢が持つ値の設定）です
なるほどです。となりますと、<select>のvalueと<option>のvalueが連動していて、<select>のvalueに指定した値が、<option>のvalueに含まれていた場合、その選択肢を表示するといった形でしょうか...?

[maisumakun]

そのとおりです。

[jjj001]

ありがとうございます。
そういった仕組みがあった訳なのですね。
勉強になりました。