I am creating a registration form with VueJS! The user has to enter his/her date of birth.

So, how can I generate years starting from 1900 to current year in <select> element?

I tried this:

new Vue ({
  el: '.container',
  methods: {
    getCurrentYear() {
      return new Date().getFullYear();
    }
  }
});

<div class="container">
  <select id="dob">
    <option value="0">Year:</option>
    <option v-for="year in getCurrentYear()" :value="year">{{ year }}</option>
  </select>
</div>

<script src=".5.16/vue.js"></script>

I am creating a registration form with VueJS! The user has to enter his/her date of birth.

So, how can I generate years starting from 1900 to current year in <select> element?

I tried this:

new Vue ({
  el: '.container',
  methods: {
    getCurrentYear() {
      return new Date().getFullYear();
    }
  }
});

<div class="container">
  <select id="dob">
    <option value="0">Year:</option>
    <option v-for="year in getCurrentYear()" :value="year">{{ year }}</option>
  </select>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

However, the year starts from 1 in this case. So, how can I loop through <option> with the year starting from 1900?

• javascript
• vue.js
• vuejs2

• Why aren't you using <input type="date">? – nnnnnn Commented Apr 7, 2018 at 6:55
• @nnnnnn No, I don't want to use that. – Sanjay Commented Apr 7, 2018 at 6:56

3 Answers 3

1. Don't use a method in the loop, use a computed property instead.
2. Don't use v-if in a v-for element. It's bad!

new Vue ({
  el: '.container',
  computed : {
    years () {
      const year = new Date().getFullYear()
      return Array.from({length: year - 1900}, (value, index) => 1901 + index)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div class="container">
<select id="dob">
  <option value="0">Year:</option>
  <option v-for="year in years" :value="year">{{ year }}</option>
</select>
</div>

   mounted(){
this.inittahun();          
},
     computed : {
           inittahun() {
      let years = [];
      for (var i = 2001; i <= new Date().getFullYear(); i++) {
        years.push(i );
      }

      this.years = years;
    },

    <select2 v-model="form.tahun">
              <option value="">----</option>
              <option :value="year" v-for="year in years" :key="year">
                {{ year }}
              </option>
            </select2>

You can use v-if:

  <option v-for="year in getCurrentYear()" v-if="year >= 1900" :value="year">{{ year }}</option>

[ https://v2.vuejs.org/v2/guide/list.html#v-for-with-v-if ]