Using VueJS to Create a Range of Years from 1900 to Present Year

Question

Using VueJS to Create a Range of Years from 1900 to Present Year

I'm currently developing a registration form using VueJS, wherein users need to input their date of birth.

My challenge is in generating a list of years starting from 1900 up to the current year within a <select> element. Any suggestions on how I can accomplish this?

I attempted the following:

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 range always starts from 1. How can I modify the loop within the <option> to begin from the year 1900?

javascript vue.js vuejs2

Answer 1

Answer №1

It's best practice to avoid using a method within a loop; instead, utilize a computed property.
Avoid using v-if inside a v-for loop. This can lead to performance issues. Learn more here!

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>

Answer 2

It's best practice to avoid using a method within a loop; instead, utilize a computed property.
Avoid using v-if inside a v-for loop. This can lead to performance issues. Learn more here!

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>

Answer 3

Answer №2

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

      this.yearList = yearList;
    },

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

Answer 4

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

      this.yearList = yearList;
    },

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

Answer 5

Answer №3

To filter options based on a condition, you can utilize the v-if directive:

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

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

Answer 6

To filter options based on a condition, you can utilize the v-if directive:

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

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

Using VueJS to Create a Range of Years from 1900 to Present Year

Answer №1

Answer №2

Answer №3

Similar questions

Tracking a razor ajax form using pace.js has never been easier with these simple steps

Is there a way for me to detect if the user has manipulated the CSS or JavaScript in order to alter the look of my website?

Can I access the component attributes in Vuetify using Typescript?

Access previous value in Vuejs onchange event

Understanding how events propagate in three.js

Unattaching Events in AngularJS

Encountering permission issues while attempting to add `@nuxtjs/sentry` in a Docker container running Node 16.14. Installation

Utilize React Hook Form to easily reset the value of an MUI Select component

Tips for creating an endless scrolling/loader feature in Nuxt?

Encountering a problem with React router

The loop feature in Swiper.js seems to be malfunctioning and not functioning as

Utilizing JavaScript to conceal div elements within a ul container

Restore font-weight if a different list item is chosen

Tips for stopping Infinite Scroll from loading pages when the tab is inactive

What could be the reason behind receiving a 406 Not Acceptable status at the client side from the server, and why is my Spring controller not being triggered?

What causes my input field to lose focus in React.js after typing just one character?

Unable to modify the content of a table cell after triggering a Bootstrap modal event

AngularJS - Showcase a dynamic list of information according to the value chosen

Passing an array of items as a property to a child component in React with Typescript is not possible

Error: The 'price' property is undefined and cannot be read at path C:NODEJS-COMPLETE-GUIDEcontrollersshop.js on line 45, character 37