为什么我的 Vuetify 的 Datepicker 不起作用？答案

【问题标题】：Why my Vuetify's Datepicker doesn't work?为什么我的 Vuetify 的 Datepicker 不起作用？
【发布时间】：2020-08-22 01:07:06
【问题描述】：

我是 vuejs + vuetify 的新手。我正在使用日期选择器来过滤数据表。过滤部分正在工作，但是，当我清除该字段时，表格不会返回到原始形式。我使用 html 的输入日期进行了测试，并且效果很好。我做错了什么？

这是日期选择器组件：

    <template>
          <v-menu
                  ref="menu"
                  v-model="menu"
                  :close-on-content-click="false"
                  transition="scale-transition"
                  offset-y
                  max-width="290"
                  min-width="290"
          >
              <template v-slot:activator="{ on }">
                  <v-text-field
                          clearable
                          dense
                          color="#15C98A"
                          outlined
                          v-model="computedDataFormatada"
                          label="data inicio"
                          append-icon="mdi-calendar-outline"
                          readonly
                          v-on="on"
                  ></v-text-field>
              </template>
              <v-date-picker
                      v-model="date"
                      @input="dataEscolhida"
                      locale="pt"
                      color="#15C98A"
                      no-title
              ></v-date-picker>
          </v-menu>
</template>

<script>
    export default {
        name:'DataPicker',
        props:['label'],
        data() {
            return {
                date: null,
                menu: false,
            };
        },
        computed: {
            computedDataFormatada () {
                return this.formataData(this.date)
            },
        },
        methods: {
            dataEscolhida() {
                    this.$emit('selecionado',this.computedDataFormatada);
                    this.menu = false;
            },
            formataData(date) {
                if (!date) return null;

                const [year, month, day] = date.split("-");
                return `${day}/${month}/${year}`;
            }
        }
    };
</script>

这是我过滤的方式：

 <v-data-table
        fixed-header
        single-select
        item-key="id"
        :headers="headers"
        :items="customFilter"
        :items-per-page="5"
        class="elevation-1"
 ></v-data-table>


computed:{

 customFilter(){
                let startDate = this.dataInicioFiltro;
                let endDate = this.dataFimFiltro;
                return _.filter(this.grupos, (function (info) {
                    let date = info.data;
                    if ( (_.isNull(startDate) && _.isNull(endDate))||(_.isEmpty(startDate) && _.isEmpty(endDate)))
                        return true;
                    else if((!_.isEmpty(startDate) && _.isEmpty(endDate)))
                      return date ===startDate;
                    else if((_.isEmpty(startDate) && !_.isEmpty(endDate)))
                        return date ===endDate;
                    else
                    return (date >= startDate && date <= endDate);
                }))
            }
}

这就是我在视图中使用组件的方式：

  <data-filtro label="data  inicial" @selecionado="dataInicioFiltro=$event" />

我也在使用 lib lodash。

【问题讨论】：

标签： vue.js datepicker vuetify.js

【解决方案1】：

大家好，我终于解决了！只需使用事件 click:clear

【讨论】：