如何在不使用可清除的情况下清除 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

你只需要像这样添加观察者：

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