VueJS：数据未更新

Question

我正在制作一个用户必须提交出生日期的表单。

日期会根据所选的月份和年份动态更新，即一月为 31 天，三月为 31 天，依此类推。

如果所选日期小于生成的月份的天数，则所选日期将为 1。

但问题是，当您在任何月份中选择超过 29 天后选择二月时，所选日期未设置为 1。

例如： 假设我选择了 Day: 31 和 Month: January，然后当我选择 Month: February 保持这一天即第 31 天不变时，选定的日期不会设置为 1，因为选定的日期 (31) > 生成的日期 (28)。

以下代码适用于其他月份，但仅不适用于二月。

帮帮我：

代码：

new Vue({
	el: '.field',
	data: {
    	dobYear: 1900,
        dobMonth: 'january',
        dobDay: 1,
        months: [
            {month: 'january', days: 31},
            {month: 'february', days: {reg: 28, leap: 29}},
            {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},
        ],
    },
    computed: {
        filterYear() {
            let getYear = new Date().getFullYear();
            return Array.from({length: getYear - 1899}, (value, index) => index + 1900);				
        },
        filterDays() {
            const month = this.months.filter(value => value.month === this.dobMonth)[0];
            let y = this.dobYear;
            
            // Here's the problem
            if(this.dobDay > month.days) {
                this.dobDay = 1;
            }

            if(!((y % 4) || (!(y % 100) && y % 400)) && this.dobMonth === 'february') {
                return month && month.days.leap;
            }else if(this.dobMonth === 'february') {
                return month && month.days.reg;
            }

            return month && month.days;
    	}
    }
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div class="field">
    <label for="date-of-birth">Date of Birth:</label><br>
    <select v-model="dobYear">
        <option 
            v-for="year of filterYear" 
            :value="year">
            {{ year }}
        </option>
    </select>
    <select v-model="dobMonth">
        <option 
            v-for="mon of months" 
            :value="mon.month">
            {{ mon.month }}
        </option>
    </select>
    <select v-model="dobDay">
        <option v-for="day in filterDays" :value="day">{{ day }}</option>
    </select>
</div><br>

Answer 1

month.days 是一个对象。您需要检查month.days 上的reg 属性，例如this.dobDay > month.days.reg

new Vue({
	el: '.field',
	data: {
    	dobYear: 1900,
        dobMonth: 'january',
        dobDay: 1,
        months: [
            {month: 'january', days: 31},
            {month: 'february', days: {reg: 28, leap: 29}},
            {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},
        ],
    },
    computed: {
        filterYear() {
            let getYear = new Date().getFullYear();
            return Array.from({length: getYear - 1899}, (value, index) => index + 1900);				
        },
        filterDays() {
            const month = this.months.filter(value => value.month === this.dobMonth)[0];
            let y = this.dobYear;
            
            // Here's the problem
             
            if(this.dobDay > month.days.leap || this.dobDay > month.days) {
                
                this.dobDay = 1;
            }

            if(!((y % 4) || (!(y % 100) && y % 400)) && this.dobMonth === 'february') {
                return month && month.days.leap;
            }else if(this.dobMonth === 'february') {
                 
                return month && month.days.reg;
            }

            return month && month.days;
    	}
    }
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div class="field">
    <label for="date-of-birth">Date of Birth:</label><br>
    <select v-model="dobYear">
        <option 
            v-for="year of filterYear" 
            :value="year">
            {{ year }}
        </option>
    </select>
    <select v-model="dobMonth">
        <option 
            v-for="mon of months" 
            :value="mon.month">
            {{ mon.month }}
        </option>
    </select>
    <select v-model="dobDay">
        <option v-for="day in filterDays" :value="day">{{ day }}</option>
    </select>
</div><br>