Vue功能日历-使用v-model动态设置selectedDates

Question

我希望能够设置vue功能日历(版本2.8.87(组件的选定日期(https://github.com/Digital-Threads/vue-functional-calendar)。我设置了v模型，可以通过鼠标点击来检测选择的日期。

但是，如果我通过javascript函数设置选定的日期，日历不会更新，也不会标记/选择这些日期。下面的代码显示了一个最小的示例。如果有人已经做到了这一点，我将非常感谢任何建议。

<template>
<div>
<FunctionalCalendar 
v-model="calendarData"
:configs="calendarConfigs"
ref="Calendar">
</FunctionalCalendar>
<b-form @submit="getCal">
<b-button class="button float-right" type="submit" variant="success">Submit</b-button>
</b-form>
</div>
</template>
<script>
import { FunctionalCalendar } from 'vue-functional-calendar';
export default {
components:{FunctionalCalendar},
name: 'CustomerArea',
data() {
return {
calendarData:{
selectedDates : []
},
calendarConfigs:{
isMultipleDatePicker : true
},
};
},
methods: {
getCal: function(){
console.log("getCal called");
this.calendarData.selectedDates = [{date: '21/7/2020'}];
}
}
};
</script>

Answer 1

出于某种原因，还需要设置所有其他值(至少设置为false/invalid(，然后正确标记所选日期：

this.calendarData.selectedDates.push({ "date": "21/7/2020", "dateTime": false, "hour": "00", "minute": "00" });
this.calendarData.selectedDate = false; 
this.calendarData.selectedDateTime = false;
this.calendarData.selectedHour = "00";
this.calendarData.selectedMinute = "00";
this.calendarData.selectedDatesItem = "";
this.calendarData.dateRange = { "start": 
{ "date": false, "dateTime": false, "hour": "00", "minute": "00" }, 
"end": { "date": false, "dateTime": false, "hour": "00", "minute": "00" } 
};