使用 Vuejs 3 加载时自动填充 select 选项元素

Question

我是 Vue.js 的新手，正在尝试制作一个简单的计算器，但无法完全通过这个障碍。我当前的目标是在初始加载时将当前月份及其数字长度显示为占位符，而在用户做出选择之前目前不显示任何内容。我正在考虑另一个函数，该函数将利用 populated() 和 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
}

使用 Vuejs 3 加载时自动填充 select 选项元素

autofill select option elements on load with Vuejs 3

vue.js

data-binding

calendar

conditional-statements

vuejs3