如何在Vue中设置当前年份和未来5年的数组？

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)]

然后，它只是映射到新创建的数组上，并返回当前Year +当前索引。

很高兴知道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),
    }
},