Action by clicking on the clear vuetify field

Question

In a filter where fields are filled in there is the need sometimes to clear the field.

I’m trying to clear a field and recognize the value of that action by clicking on the "x" to clear the form

Only nothing happens at all.

Like I’m doing?

<v-menu ref="menu" v-model="menu" :close-on-content-click="false" transition="scale-transition" offset-y max-width="290px" min-width="auto" >
   <template v-slot:activator="{ on, attrs }">
       <v-text-field ref="mes" v-model="descMes" label="Mês" append-icon="mdi-calendar" v-bind="attrs"v-on="on" clearable autofocus dense outlined @click.clear="clear('mes')" />
   </template>
   <v-date-picker v-model="mes" no-title @input="menu = false" type="month" @click:month="parametroCliente" locale="pt-BR" />
</v-menu>

I mean, I put the attribute @click.clear="clear('mes')"

Where there is a function called clear(param) in the methods

But this only works if I click inside the field, if I click the 'x' of to trigger the clearable the field is clean but the function is not triggered

I also tried using @Blur to leave the field identify if it is empty

All this is for a filter that I would like to do, where if it has no value, it is to search every month

Is there any way to trigger some action by clicking on the 'X' option'?

Answer 1

'click:clear is the name of the event triggered by the element 'X', not 'click.clear', so when you create an Handler for the event like this: @click.clear="clear('mes')", you’re actually putting a Lerner in an event that doesn’t exist.

Making the exchange for @click:clear="clear('mes')" as the solution of Germano Buss Niehues will solve the problem!

Answer 2

The problem is in the syntax @click.clear="clear('mes')" change to @click:clear="clear('mes')" not if exactly because but I believe that the : add to a Watcher on the click that even when you’re off the field it gets "listening" the click on the 'X' button'