Javascript vuetify日期选择器清除日期并重新呈现组件

我在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>

data（）{
返回
{ 
日期：[''，''，
菜单：错，
}
}
取消
好啊

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

<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>

---

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

<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>

---

需要重置整个组件，包括用户在datepicker上所做的UI选择。通过为

v-date-picker

引入

v-if=“！isReset”

，并在清除事件时切换

isReset

（这将销毁然后创建组件，有效地重置ui状态）

脚本-

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>

取消

需要重置整个组件，包括用户在datepicker上所做的UI选择。通过为

v-date-picker

引入

v-if=“！isReset”

，并在清除事件时切换

isReset

（这将销毁然后创建组件，有效地重置ui状态）

脚本-

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>

取消

thx anees，最后一件事，我已经根据这些日期从自定义过滤器中呈现了我的列表。当我清除时，是否有方法重新呈现我的列表，它将显示所有列表项，就像初始加载时一样。因为现在您的方法将清除文本字段，但不会根据已清除的日期重新呈现我的列表，即dates=[''，]，这将显示我希望清除的所有列表项。是的，您可以在清除日期时发出事件。然后从呈现其列表的组件捕获事件。请检查文档，了解如何发射和捕获它Hi@dontay你在这里找到了第一条评论的解决方案吗？thx anees，最后一件事，我的列表是根据这些日期通过自定义过滤器呈现的。当我清除时，是否有方法重新呈现我的列表，它将显示所有列表项，就像初始加载时一样。因为现在您的方法将清除文本字段，但不会根据已清除的日期重新呈现我的列表，即dates=[''，]，这将显示我希望清除的所有列表项。是的，您可以在清除日期时发出事件。然后从呈现其列表的组件捕获事件。请查看文档，了解如何发射和捕获Hi@dontay您在这里找到了第一条评论的解决方案吗？目前为止，重置UI元素对我们来说是最好的。在我们的例子中，我们在picker元素中有一个TODAY按钮（按您的预期执行），但是picker没有重新渲染回选定的日期。我们的解决方案是使用v-if绑定，但在model属性上添加watch:

watch:{dates:function（）{this.isReset=true；this.$nextTick（（）=>{this.isReset=false；}）}…

笨手笨脚的，但以前只在“今日点击”事件中，也需要它来对模型进行其他外部更改。目前为止，重置UI元素对我们来说是最好的选择。在我们的例子中，我们在picker元素中有一个“今日”按钮（如您所料）但是选择器没有重新渲染回选定的日期。我们的解决方案是使用v-if绑定，但在模型属性上添加监视：

watch:{dates:function（）{this.isReset=true；this.$nextTick（（）=>{this.isReset=false；}}）…

笨手笨脚的，但以前只在“今日点击”事件中，也需要它来对模型进行其他外部更改。还没有缺点。