[Vuejs]-Vuetify text-field won´t use computed property

by

1👍

✅

To be honest your use-case seems very strange but…

The problem is that v-text-box has some internal state (according to source code comments to make it work without the model) and on clear icon click it sets it to null but it does this in the nextTick – source. This is little bit strange but they probably has some reasons to do so…

So if you don’t want to really clear the content but instead set it to something else, do not use default "clearable" functionality and use append slot instead:

<v-text-field :value="text" label="Just a label">
  <template v-slot:append>
    <v-icon @click="booleanModel = true">clear</v-icon>
  </template>
</v-text-field>

-1👍

When you click on the clear button, the value of booleanModel does not change.
You need to update the @click:clear = "booleanModel = false;".

Also, add a :key="booleanModel in your text field, which will ensure that whenever the value of booleanModel changes it will re-render the v-text-field component again.

Leave a comment