Как установить массив текущего года плюс следующие 5 лет в Vue?

Question

Я пытаюсь установить выпадающий выбор в Vue, который по умолчанию соответствует текущему году и включает опции на следующие 5 лет.Я думаю, что мой код технически работает, но мне было интересно, есть ли четкий способ написать его.

<select v-model="enrollYear" id="enrollYear" class="custom-select">
    <option v-for="year in years" :selected="selectedYear === year">{{ year }}</option>
</select>

data() {
    return {
        requestData: {
            enrollYear: null,
        },
        selectedYear: new Date().getFullYear(),
        years: [new Date().getFullYear() + 1,
               new Date().getFullYear() + 2,
               new Date().getFullYear() + 3,
               new Date().getFullYear() + 4,
               new Date().getFullYear() + 5
        ],
    }
},

Answer 1

Короткий путь (и элегантный) - это что-то вроде

[...Array(6)].map((a,b)=> new Date().getFullYear() + b)

. Это создаст пустой массив длиной 6 Array(6), а затем развернет его в массив, чтобы фактически создать внутренние неопределенные элементы [...Array(6)]

Затем он просто отображает вновь созданный массив и возвращает текущий год + текущий индекс.

Хорошо знать, что Array(6) не инициализирует позиции в массивеон просто устанавливает длину.Вот почему нам нужно распространять его.

---

Еще одна вещь, которую я заметил в вашем коде, это отсутствие даты по умолчанию.Когда вы добавляете v-model="enrollYear", он на самом деле устанавливает значение этого элемента на что-либо, хранящееся в enrollYear, поэтому не имеет значения, если вы установите опцию selected, она не будет выбрана.

Чтобы установитьв качестве значения по умолчанию для раскрывающегося списка просто установите переменную enrollYear на текущий год.

---

Это ваш код с изменениями, указанными выше

<select v-model="enrollYear" id="enrollYear" class="custom-select">
    <option v-for="year in years">{{ year }}</option>
</select>

data() {
    return {
        requestData: {
            enrollYear: new Date().getFullYear(),
        },
        // This is the same that you have, just simplified
        years: [...Array(6)].map((a,b)=> new Date().getFullYear() + b),
    }
},