转到上个月并再次打开 v-date-picker 时未选择当前月份

Question

我正在使用 vuetify 日期选择器，它位于一个对话框中。当我第一次打开对话框时，它显示当前月份，如果我转到上个月并关闭对话框，然后重新打开它，它仍然保留在上个月。我需要避免它。每次打开日历时，它应该在当前月份，无需用户手动导航到当前月份。

<v-dialog v-model="isShow">
  <v-date-picker
    v-model="dates1"
    :max="max"
    :min="min"
    readonly
    range
    color="primary"
  ></v-date-picker>                                              
</v-dialog>

我的日期选择器如上，有什么办法可以解决这个问题吗？

Answer 1

您可以将 <v-date-picker>.pickerDate 绑定到本地数据属性，该数据在对话框关闭时重置为当前日期。

创建一个名为 "pickerDate" 的数据属性，并使用 .sync 修饰符将其绑定到 <v-date-picker>.pickerDate：

<template>
  <v-date-picker :pickerDate.sync="pickerDate" />
</template>

<script>
export default {
  data() {
    return {
      pickerDate: null,
    }
  }
}
</script>

在 isShow 上添加观察者以在 isShow 为 false 时重置 pickerDate（在对话框关闭时）：

<script>
export default {
  watch: {
    isShow(isShow) {
      if (!isShow) {
        const today = new Date().toISOString().split('T')[0]
        this.pickerDate = today
      }
    }
  }
}
</script>

demo

转到上个月并再次打开 v-date-picker 时未选择当前月份

current month not selected when go previous month and open the v-date-picker again

vue.js

nuxt.js

vuetify.js