vue.js v-calendar 如何捕获事件

Question

我正在使用 vuejs v-calender插件，所以我有一个日期范围选择器。一切都渲染得很好，我可以选择日期，但仅此而已。

我想做的只是注销选定的日期，以便稍后我可以将它们存储在数据库、更新表单等中，但我不知道如何实现这一点。我在文档中找不到如何执行此操作的任何示例。

有谁知道如何获取选定日期范围的开始日期和结束日期？

这是我到目前为止所拥有的......

<template>
  <v-date-picker mode='range' v-model='range' is-inline :columns="$screens({ default: 1, lg: 2 })" />
</template>

<script>

  import { DatePicker } from 'v-calendar'

  export default {
    name: 'Booking',
    components: {
      DatePicker
    },
    data() {
      return {
        range: {
          start: new Date(),
          end: null
        }
      }
    },
    mounted() {
      this.$root.$on('input', (value) => {
        console.log('dxggdfg');
      });
    }
  }

</script>

Answer 1

添加输入事件

 <v-date-picker mode='range' v-model='range' @input="onDateRangeChange" is-inline :columns="$screens({ default: 1, lg: 2 })" />

 <v-date-picker mode='range' v-model='range' @input="onDateRangeChange" is-inline :columns="$screens({ default: 1, lg: 2 })" />

或者，您可以使用watch，如果您还从外部更新 v-model，那么它会很好用：

{
   ...
   watch: {
     range: {
        handler: function () {
            console.log(this.range)
        },
        deep: true
     }
   },
   mounted() {
      this.$root.$on('input', (value) => {
        console.log('dxggdfg');
      });
    }
}