Генерация лет с 1900 по текущий год с VueJS

Я создаю регистрационную форму с помощью VueJS! Пользователь должен ввести дату своего рождения.

Итак, как я могу сгенерировать годы с 1900 по текущий год в элементе <select>?

Я пробовал это:

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>

Однако в этом случае год начинается с 1. Итак, как я могу пройти через <option> с годом, начиная с 1900 года?

Почему вы не используете <input type = "date">?

— 07.04.2018 08:55

@nnnnnn Нет, я не хочу этим пользоваться.

— 07.04.2018 08:56

javascript vue.js vuejs2

07.04.2018 08:50

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

5 729

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете использовать v-if:

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

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

07.04.2018 09:03

Ответ принят как подходящий

Не используйте метод в цикле, вместо этого используйте вычисляемое свойство.
Не используйте v-if в элементе v-for. Это плохо!

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>

Я подумал, был ли v-if хорошим подходом. Теперь ваш ответ проясняется. Большое спасибо. Помечено как ответ :)

— 07.04.2018 09:25

v-if оценивается для каждого элемента в массиве, что в большинстве случаев является бесполезным. Вычисленные свойства запоминаются, поэтому они оцениваются только один раз и «обновляются» при изменении какой-либо переменной в нем (реактивность). Если вы используете метод непосредственно внутри v-for, он оценивается каждый раз, когда что-то изменяется в вашем компоненте, что очень дорого;)

— 07.04.2018 09:29

Понятно! Спасибо. Выбор между computed и methods для меня действительно запутанная задача.

— 07.04.2018 09:32

07.04.2018 09:16

   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>

Постарайтесь описать, почему предложенное вами решение подойдет для указанной проблемы.

— 07.12.2020 14:11

07.12.2020 11:37