javascript - VueJS:数据未更新

我正在制作一个表格，用户必须提交其出生日期。

这些天会根据所选的月份和年份进行动态更新，即1月为31天，3月为31天，依此类推。

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

但是问题在于，当您在任意月份中选择的日期超过29天后，如果选择2月，则所选的日期未设置为1。

例如：
假设我选择了Day：31和Month：January，然后选择Month：February来保持日期（即31天）不变，则所选日期不会设置为1，因为所选日期（31）>生成日期（28）。

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

帮我：

码：

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>

最佳答案

month.days是一个对象。您需要检查reg上的month.days属性，例如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>