Почему Datepicker моего Vuetify не работает? - PullRequest
Новая
       71

Почему Datepicker моего Vuetify не работает?

0 голосов
/ 07 мая 2020

Я новичок в vuejs + vuetify. Я использую datepicker для фильтрации данных. Часть фильтрации работает, однако, когда я очищаю поле, таблица не возвращается к исходной форме. Я тестировал, используя дату ввода html, и работал отлично. Что я делаю не так?

Это компонент datepicker: 

    <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 loda sh.

1 Ответ

0 голосов
/ 07 мая 2020

Окей, я наконец решил это! Просто нужно использовать событие click: clear

...