Question

我有一个奇怪的场景，也许我做得不对。我有两个日期选择器，一个用于start_date，另一个用于end_date。当start_date更改且日期为isAfter end_date时，start_date应成为end_date。但是，第一个更改工作正常，但是，任何更改（在end_date之后）都不会触发，并且在之后的任何尝试中都会显示原始日期。

Vue的：

<date-picker :value="start_date" @input="changeStartDate" />
<date-picker :value="end_date" @input="changeEndDate" />

脚本：

...
data() {
    return {
        start_date: moment().format('YYYY-MM-DD'),
        end_date: moment().add(7, 'days').format('YYYY-MM-DD')
    };
},
methods: {
    changeStartDate(value) {
        console.log('value', value);

        let start_date = moment(value, 'YYYY-MM-DD');
        let end_date = moment(this.end_date, 'YYYY-MM-DD');

        if (start_date.isAfter(end_date)) { start_date = end_date.clone(); }

        this.start_date = start_date;
    },
    changeEndDate(value) {
        // Similar code as above
    }
}
...

因此，如果我的范围是2017年3月10日至2017年3月17日，我将start_date更改为2017年3月24日，这是第一次触发，它将日期切换为2017年3月17日，如预期。但是，如果再次进行第一次火灾，并再次更改为2017年3月24日，它会将start_date更改为2017年3月24日，并且不遵守isAfter规则。

任何想法可能会发生在这里？

更新

在做了一些调试后，我注意到发生了什么。

由于日期从2017年3月10日到2017年3月24日更改，因此日期首次正常工作。
如果代码将start_date更改为end_date，则会更改该值并更新UI。
第二次触发时，它会直观地改变它，并更改值，但是当事件再次触发时，它是之前传递的“相同”日期 - Vuejs将其视为未更改，因此它不会更新它。
如果我在end_date之前将值更改为某个值，则会再次起作用。

所以也许问题是如何在每次数据发生变化时让VueJS触发事件，无论它是否是相同的数据？

Answer 1

您正在将一个时刻对象分配给start_date变量，但它应该是一个格式化回字符串的时刻，如下所示：

this.start_date = start_date.format('YYYY-MM-DD');

因此，当if语句为true时，end_date克隆时刻对象仍然会转换为字符串。

价值/输入生命周期问题

1 个答案: