我的组件中有两个 flatpicker。当第一个日期被更改时,我必须更改第二个日期,但用户可以手动更改第二个日期。
<template>
<default-field :field="field" :errors="errors">
<template slot="field">
<flatpickr
v-model="dateStart"
id="championshipDateStart"
name="championshipDateStart"
:placeholder="placeholder"
:options="optionsStart"
:value="dateStart"
>
</flatpickr>
<flatpickr
v-model="dateEnd"
id="championshipDateEnd"
name="championshipDateEnd"
:placeholder="placeholder"
:options="optionsEnd"
:value="dateEndValue"
>
</flatpickr>
</template>
</default-field>
</template>
如果用户更改第一个日期,则第二个日期应为第一个日期 + 3 天。
changeDateStart(event){
this.dateEndValue = moment(new Date(this.dateStart)).add(3, 'day').format('YYYY-MM-DD');
}
我尝试使用计算道具重新渲染第二个 flatpicker,但没有任何反应。
有我的计算道具
computed: {
placeholder(){
return moment().format('YYYY-MM-DD');
},
optionsStart(){
return {
altInput: true,
altFormat: "Y-m-d",
allowInput: true,
altInputClass: "w-1/3 mt-3 form-control form-input",
onChange: this.changeDateStart()
};
},
optionsEnd(){
return {
altInput: true,
altFormat: "Y-m-d",
allowInput: true,
altInputClass: "w-1/3 mt-3 form-control form-input",
};
},
dateEndValue:{
get: function(){
return this.dateEnd;
},
set: function(newDate){
this.dateEnd = newDate;
}
}
},
最奇怪的是我看到了 vue-devtools 的变化(http://joxi.ru/nAynW7asggRNzr)