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

Question

我希望能够设置 vue 功能日历（版本 2.8.87）组件（https://github.com/Digital-Threads/vue-functional-calendar）的选定日期。我设置了 v-model 并且可以检测通过鼠标单击选择的日期。

但是，如果我从 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>

标签： javascriptvue.jsv-model

Answer 1

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

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