How to remove the error hint on input focus in vueJS

Question

I'd like to remove the error when I have focus on my input. Here is my input:

      <v-text-field
        v-model="models.codePostal"
        label="Code postal"
        :rules="regles.codePostal"
        :hint="this.models.communeResidence.codePostal!==''?`Pourrait être ${this.models.communeResidence.codePostal}`:''"
        hide-details="auto"></v-text-field>

I thought I could add

@focus="error=false"

But it doesn't work. Does anybody have an idea? It may not be possible. Thanks.

Try adding prop hide-details="auto" vuetifyjs.com/en/components/text-fields#auto-hiding-details — Shivam Singh
– Shivam Singh, Commented Feb 15, 2020 at 10:54

Lana · Accepted Answer · 2020-02-19 14:27:29Z

2

Use reset method on focus event.

<v-text-field
  @focus="reset()"
  ref="field"
  v-model="models.codePostal"
  label="Code postal"
  :rules="regles.codePostal"
  :hint="this.models.communeResidence.codePostal!==''?`Pourrait être ${this.models.communeResidence.codePostal}`:''"
  hide-details="auto"
></v-text-field>

 methods: {
    reset() {
      this.$refs.field.reset()
    }

Or resetValidation() method in the same way if you don't want to clear the field.

edited Feb 19, 2020 at 14:27

answered Feb 17, 2020 at 11:56

Lana

1,30710 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

djcaesar9114 Over a year ago

Thanks, it does work for the error, but it clears the input, what is not really good if the user only has to change a character.

Lana Over a year ago

@djcaesar9114 If you don't want to clear the field then use resetValidation() instead of reset()

Collectives™ on Stack Overflow

How to remove the error hint on input focus in vueJS

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related