vuetify datepicker 清除日期并重新渲染组件

Question

我在 vuetify js 中有一个日期选择器，我希望清除日期并刷新组件。

我有一个基于日期范围数组过滤的 v-data 表，我希望能够在 datepicker 中添加一个 v-btn clear 来执行此操作，或者在文本字段上使用一个 clear X btn。

data(){
    return
    { 
      date:['',''],
      menu:false,
     }

   }


  <v-menu
    ref="menu"
    v-model="menu"
    :close-on-content-click="false"
    :return-value.sync="dates"
    transition="scale-transition"
    offset-y
    min-width="290px"
  >
    <template v-slot:activator="{ on }">

      <v-text-field
        v-if="selectedTask"
        label="Select Start Date Range"
        readonly
        v-on="on"
        v-model="dates"
      ></v-text-field>


    </template>

     <v-date-picker v-model="dates" range>
        <v-spacer></v-spacer>
      <v-btn text color="primary" @click="menu = false">Cancel</v-btn>
      <v-btn text color="primary" @click="$refs.menu.save(dates)">OK</v-btn>
     </v-date-picker>


  </v-menu>

Answer 1

您可以在日期选择器中设置一个清除按钮，如下所示

<v-date-picker v-model="dates" range>
  <v-btn 
    text color="primary" @click="menu = false">Cancel
  </v-btn>
  <v-btn 
    text color="primary" @click="$refs.menu.save(dates)">OK
  </v-btn>
  <v-spacer></v-spacer>
  <v-btn 
    text color="primary" @click="$refs.menu.save([])">Clear
  </v-btn>
</v-date-picker>

您也可以将文本字段设为clearable，它会附加一个清晰的图标

<v-text-field
  v-if="selectedTask"
  label="Select Start Date Range"
  readonly
  v-on="on"
  v-model="dates"
  clearable
>
</v-text-field>

Answer 2

需要重置整个组件，包括用户在 datepicker 中所做的 UI 选择。通过为v-date-picker 引入v-if="!isReset" 并在清除事件时切换isReset 来做到这一点（这会破坏然后创建组件，有效地重置用户界面状态）。

脚本 - onClear 方法

  //* Resets data input component state
  onClear() {
    this.isReset = true
    this.$nextTick(() => {
      this.isReset = false
      //* Resetting your data to initial state, eg:
      this.$emit(this.emits.onSave, this.latestAcceptedValue)
    })
  }

模板 - 引入v-if 来切换组件

  <v-date-picker v-if="!isReset" v-model="dates" range>
      <v-btn text @click="onClear">Cancel</v-btn>
  </v-date-picker>