Vuetify - How to trigger method when clear a v-text-field

Question

is there a way to call a method while clearing a text-field with Vuetify?

<v-text-field
    class="mt-2 mb-0"
    clearable
    solo
    v-model="searchQuery"
    append-icon="search"
    @click:append-outer="searchCos"
   label="Nom de compagnies ou mots-clés">
 </v-text-field>

...
onClear() {
doSomethingHere
}

Thanks

Francis

score 48 · Accepted Answer · answered Sep 30 '18 at 02:11

48

You can use the @click:clear="()" so you can clear your text at the same time it will call the function.

Here's the example

https://codepen.io/anon/pen/ePmLOg?editors=1010

answered Sep 30 '18 at 02:11

ßiansor Å. Ålmerol

2,849
3
22
24

1

Is there anyway to prevent the clearing of the text. Like if I want to add a confirmation for the user prior to clearing the text? Is there an 'event' I can capture and then add preventDefault() or something like that? – ggedde Dec 09 '22 at 20:37

score 10 · Answer 2 · answered Sep 30 '18 at 05:01

10

Use the clear-icon-cb prop. This allows you to use a custom callback function when the clear icon when clicked.

<v-text-field
  clearable
  :clear-icon-cb="onClearClicked">
</v-text-field>

onClearClicked () {
  // do something
}

answered Sep 30 '18 at 05:01

Brian Lee

17,904
3
41
52

19

:clear-icon-cb is now depreciated. now use @click:clear – Kent Dela Cruz Fueconcillo Jan 08 '19 at 07:57

score 4 · Answer 3 · answered Jul 21 '20 at 17:24

4

You can use the clearableCallback

<v-text-field
    ref="inputRef"
    class="mt-2 mb-0"
    clearable
    .....
 >
</v-text-field>
<v-btn text @click="clearInput">clear</v-btn>

<script>
   export default {
     ......
     methods:{
       .....
       clearInput() {
          this.$refs.inputRef.clearableCallback()
       }
    }

   }

answered Jul 21 '20 at 17:24

Alex Montoya

4,697
1
30
31

This the best answer in my opinion. – Ken Jul 23 '21 at 08:23
1

Best way to do it! But use reset() instead of clearableCallback() – tjarkmeyer Oct 01 '21 at 14:23

score 3 · Answer 4 · answered Oct 01 '21 at 14:22

Call the reset function of the input field like:

<v-text-field ref="inputRef"></v-text-field>
<v-btn @click="clearInput">clear</v-btn>

<script>
   export default {
     methods:{
       clearInput() {
          this.$refs.inputRef.reset()
       }
     }
   }

score 1 · Answer 5 · answered Nov 25 '20 at 13:41

1

If you want the clear-button to update your model-value to something specific you can also just override the clear icon:

<v-text-field
  v-model="myValue"
  append-icon="mdi-close"
  @clear:append="myValue = 1">
</v-text-field>

answered Nov 25 '20 at 13:41

Raymundus

2,173
1
20
35

score 0 · Answer 6 · answered Oct 23 '20 at 08:33

For my case, @click:clear doesn't run. To run an action when text is typing and cleared, I use @input :

<v-text-field v-model="search" @input="sendSearch" clearable hide-details></v-text-field>

In my methods:

methods: {
  sendSearch(){
    this.$emit("send-search",this.search);
  }
}

Vuetify - How to trigger method when clear a v-text-field

6 Answers6

Linked