VueJS：数据未更新

Question

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

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

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

但问题是，如果您在任何一个月中选择超过29天的日期后选择2月，则所选日期不会设为1。

例如： 让我们说我选择了Day：31和Month：January，然后当我选择Month：February保持日期即第31天不变时，所选日期不会设置为1作为选定日期（31）＆gt ;生成日（28）。

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

帮助我：

代码：

＆＃13;

＆＃13;

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;
    	}
    }
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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>