如何使用 vcalendar 捕获日期更改的时间？

问题描述

我的代码中有以下内容...

<template>
    <DatePicker v-model="selectedDate" @input="dateChanged">
        <template v-slot="{ inputValue,inputEvents }">
          <input
              :value="inputValue"
              v-on="inputEvents"
          />
        </template>
    </DatePicker>
    <h2>{{selectedDate}}</h2>
    <h2>{{date}}</h2>
</template>
<script>
import { DatePicker } from "v-calendar";

export default {
  components: { DatePicker },data() {
    return {
      selectedDate: Date.Now(),};
  },mounted() {
    this.selectedDate = this.date;
  },props: {
    date: {
      type: Number,default: Date.Now(),}
  },methods: {
    dateChanged() {
      console.log(`The date changed to`);
    },},};
</script>

问题是 dateChanged 永远不会被调用。我也试过 @changed="dateChanged" 但无论哪种方式我都没有在浏览器中看到日志消息。选择新日期时如何获取更改事件？

解决方法

在 <template> 块中，您需要正好有一个孩子。您有 <datepicker> 和 <h2> 2 次（3 个孩子）。

如果你把日期选择器和 h2 放在一个 div 中，它应该可以工作：

<template>
  <div id="app">
    <DatePicker v-model="selectedDate" @input="dateChanged">
      <template v-slot="{ inputValue,inputEvents }">
        <input :value="inputValue" v-on="inputEvents" />
      </template>
    </DatePicker>
    <h2>{{ selectedDate }}</h2>
    <h2>{{ date }}</h2>
  </div>
</template>
<script>
import { DatePicker } from "v-calendar";

export default {
  components: { DatePicker },data() {
    return {
      selectedDate: Date.now(),};
  },mounted() {
    this.selectedDate = this.date;
  },props: {
    date: {
      type: Number,default: Date.now(),},methods: {
    dateChanged() {
      console.log(`The date changed to ` + this.selectedDate);
    },};
</script>

您可以在这里看到它的实际效果：https://codesandbox.io/s/hopeful-kapitsa-cozei?file=/src/App.vue

我们有另一种触发更改的方法，您可以在 watch 上使用 selectedDate 来获取最后一个值。您可以检查codesandbox。

<template>
  <DatePicker v-model="selectedDate">
    <template v-slot="{ inputValue,inputEvents }">
      <input :value="inputValue" v-on="inputEvents" />
    </template>
  </DatePicker>
  <h2>{{ selectedDate }}</h2>
  <h2>{{ date }}</h2>
</template>
<script>
import { DatePicker } from "v-calendar";

export default {
  components: { DatePicker },watch: {
    selectedDate: function () {
      console.log(`The selectedDate changed to`,this.selectedDate);
      // do what you want here
    },};
</script>

vcalendar vuejs3