autofill select option elements on load with Vuejs 3

Question

我是Vue.js的新手，试图制作一个简单的计算器，但不能完全使它通过这个障碍。我当前的目标是在初始加载时显示当前月份及其数字长度作为占位符，而在用户做出选择之前，当前不显示任何内容。我正在考虑另一个函数，它将利用来自populate()和showDates()函数的一些代码，但我对如何继续下去感到困惑。如果这让你难以理解，请提前道歉。下面是当前组件:

<template>
<div class="container">
<div>
{{ now }}
</div>
<select v-model="selectedMonth" class="select">
<option  v-for="n in dates" :key="n">
{{ n.month }}
</option>
</select>
<div>{{ selectedMonth }}  {{ showDates }} {{ populated }}</div> // test interpolations
<div class="contain-weekday">
<div class="weekday" v-for="days in weekDays" :key="days">
{{ days }}
</div>
</div>
<div v-if="showDates" class="calendar-integers">
<div class="integers" v-for="integer in showDates" :key="integer">
{{ integer }}
</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
selectedMonth: undefined,
thisMonth: undefined,
currentMonth: undefined,
currentDay: '',
currentDate: '',
integerDays: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
weekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thurs', 'Fr', 'Sat'],
dates: [
{
id: 1,
month:'January',
days:  31,
},
{
id: 2,
month:'February',
days:  28,
},
{
id: 3,
month:'March',
days:  31,
},
{
id: 4,
month:'April',
days:  30,
},
{
id: 5,
month:'May',
days:  31,
},
{
id: 6,
month:'June',
days:  30,
},
{
id: 7,
month:'July',
days:  31,
},
{
id: 8,
month:'August',
days:  31,
},
{
id: 9,
month:'September',
days:  30,
},
{
id: 10,
month:'October',
days:  31,
},
{
id: 11,
month:'November',
days:  30,
},
{
id: 12,
month:'December',
days:  31,
},
]
}
},
mounted() {
console.log('mounted log:', this.populated); // only logs
},
computed: {
now() {
let dateObj = new Date();
let month = dateObj.getUTCMonth() + 1;
let day = dateObj.getUTCDate();
let year = dateObj.getUTCFullYear();
let hours = dateObj.getHours();
let minutes = dateObj.getMinutes();
let newdate = year + "/" + month + "/" + day + "  " + hours + ":" + minutes;
return newdate;
},
// returns the current month in the dates array
populated() {
let currentDate = new Date();
let activeMonth = currentDate.getUTCMonth() + 1;
let thisMonth = undefined;

for (var i = 0; i < this.dates.length; i++) {
if (activeMonth == this.dates[i].id) {
thisMonth = this.dates[i].month;
}
} 
return thisMonth; 
}
},
// returns the integer value of each selected months length in the dates array 
showDates() {
var matchingDays = undefined;
for( var i = 0; i < this.dates.length; i++) {
if (this.selectedMonth == this.dates[i].month) {
matchingDays = this.dates[i].days;
} 
} return matchingDays;
},
}
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.calendar-integers {
display: grid;
width: 50vw;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: minmax(50px, auto);
text-align: center;
}
.select {
width: 10vw;
}
.contain-weekday {
display: flex;
}
.weekday {
flex-direction: row;
width: 7.2vw;
}
.integers {
background-color: #888a8b;
margin: 1px;
}
</style>

Answer 1

在你挂载的函数中像这样改变selectedMonth的值:

mounted() {
this.selectedMonth = this.populated;
console.log("mounted log:", this.populated); // only logs
}