如何在不使用 cleearable 的情况下清除 v-date-picker

Question

我正在使用 vuetify 和 nuxt.js 制作带有一些文本字段和日期选择器的表单。

这是子组件之一。

<template>
  <v-menu
    v-model="menu"
    :close-on-content-click="false"
  >
    <template #activator="{ on }">
      <v-text-field
        v-model="date"
        outlined
        readonly
        v-on="on"
      />
    </template>
    <v-date-picker
      v-model="date"
      :day-format="(date) => new Date(date).getDate()"
    ></v-date-picker>
  </v-menu>
</template>

<script>
export default {
  props: {
    value: { type: String, default: '' },
    placeholder: { type: String, default: '' },
  },
  data() {
    return {
      menu: false,
      selectedDate: this.value,
    }
  },
  computed: {
    date: {
      get() {
        return this.selectedDate
      },
      set(date) {
        this.selectedDate = date
        this.$emit('input', date)
        this.menu = false
      },
    },
  },
}
</script>

当父组件上的重置按钮被点击时，空字符串属性传递给该组件。 selectedDate可以重置，但是在v-text-field上，还有数据。

我怎样才能让它正常工作？

Answer 1

你只需要像这样添加watcher:

    watch: {
      value: {
        immediate: true,
        deep: true,
        handler(newValue) {
          this.selectedDate = newValue
        }
      }
    },

如何在不使用 cleearable 的情况下清除 v-date-picker

How to clear v-date-picker without using cleearable

vue.js

nuxt.js

vuetify.js