Vue 3页面加载时自动填充select选项默认选中当前月份的实现问题

你的问题核心是selectedMonth初始值为undefined，导致showDates计算属性无返回值，自然不会渲染日期数据，结合你已有的逻辑只需要两步修改即可实现需求：

1. 先修复现有代码的语法错误 #

你当前JS部分的computed配置存在括号配对错误：populated计算属性结束后多写了一个闭合大括号，导致showDates被放到了computed配置之外，首先删除这个多余的大括号。

2. 初始化时给selectedMonth赋值 #

你已经通过populated计算属性实现了获取当前月份名称的逻辑，只需要在mounted钩子中把这个值赋给selectedMonth即可，修改后的mounted代码如下：

mounted() {
  console.log('mounted log:', this.populated);
  // 新增代码：初始化选中当前月份
  this.selectedMonth = this.populated;
},

修改后完整可运行代码 #

<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>
    <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);
      // 初始化选中当前月份
      this.selectedMonth = this.populated;
  },
  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;
    },

    // 返回当前月份名称
    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; 
    },

    // 返回选中月份的天数
    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>

可选优化 #

你可以把两个计算属性里的for循环替换为数组find方法，代码更简洁：

populated() {
  const activeMonth = new Date().getUTCMonth() + 1;
  return this.dates.find(item => item.id === activeMonth)?.month;
},
showDates() {
  return this.dates.find(item => item.month === this.selectedMonth)?.days;
}

内容的提问来源于stack exchange，提问作者ChrJamRho