我的组件中有两个选择器。当第一个日期更改时,我必须更改第二个日期,但是用户可以手动更改第二个日期。
<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)中的变化
答案 0 :(得分:1)
我的方法是在dateStart上观看:
watch : {
dateStart (newV, oldV) {
newDate = new Date(newV)
this.dateEnd = newDate.setDate(newDate.getDate() + 3)
}
}
不需要计算的属性。如果dateStart更改,则dateEnd将更改。如果dateEnd更改,则其他任何更改。