[Vuejs]-Delay updating a data value in Vue

by

0đź‘Ť

You could use the name for toggling the class error.

Either like this:

    <div class="field" :class="{ error: name.length < 3 }">

Or via a computed method:

    <div class="field" :class="{ error: !nameIsValid }">

    computed: {
        nameIsValid() {
            return this.name.length > 2
        }
    }

I’d recommend the latter, especially if you’d want to use more than one error case (i.e. “name too long”, “invalid characters”, …).

But you’d have to acknowledge the initial state. Since name.length is initially 0 you’d have the error being displayed initially – which is probably not wanted.

For validation (incl. error message handling) you could also use a plugin like Vuelidate.

Leave a comment