如何基于计算值循环遍历月份的每一天？Vue出生日期表单实现

Hey there! I see you're building a registration form where users pick their birth date, and you need to dynamically loop through the days of the selected month. Let's walk through how to make this work smoothly with Vue.js.

Step 1: Make your selected month reactive #

First, move your selectedMonth variable inside the Vue instance's data object—right now it's outside, so Vue can't track changes to it. This keeps everything reactive:

new Vue({
  el: '#app',
  data: {
    selectedMonth: 'April', // Move this into data for reactivity
    months: [
      {month: 'January', days: 31},
      {month: 'February', days: 28},
      {month: 'March', days: 31},
      {month: 'April', days: 30},
      {month: 'May', days: 31},
      {month: 'June', days: 30},
      {month: 'July', days: 31},
      {month: 'August', days: 31},
      {month: 'September', days: 30},
      {month: 'October', days: 31},
      {month: 'November', days: 30},
      {month: 'December', days: 31}
    ]
  },
  // We'll add our computed property here next
})

Step 2: Add a computed property to get the selected month's days #

Computed properties are ideal here because they automatically update whenever selectedMonth changes. This is where we'll fetch the number of days for the currently selected month:

computed: {
  selectedMonthDays() {
    // Find the matching month object in our months array
    const matchedMonth = this.months.find(month => month.month === this.selectedMonth);
    // Return the days count (fallback to 0 if no match is found)
    return matchedMonth ? matchedMonth.days : 0;
  }
}

Step 3: Loop through the days in your template #

Now you can use v-for to generate each day option in your form. Here's an example using dropdowns for both month and day selection:

<div id="app">
  <!-- Month selection dropdown -->
  <select v-model="selectedMonth">
    <option v-for="month in months" :key="month.month" :value="month.month">
      {{ month.month }}
    </option>
  </select>

  <!-- Dynamic days dropdown -->
  <select>
    <option v-for="day in selectedMonthDays" :key="day">
      {{ day }}
    </option>
  </select>
</div>

Bonus: Handle leap years (optional) #

If you want to account for leap years for February, you can add a selectedYear data property and update the computed property to check if the year is a leap year, then adjust February's days to 29 when needed. But for your basic use case, the above setup works perfectly.

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