Delay updating a data- value

I have the following input field with an error message below it:

<div class="field" :class="{ error: !!errorMessage }">
  <input type="text" v-model="name" @input="checkName" />
  <div class="error-message">{{ errorMessage }}</div>
</div>

…and the checkName method, which … well, checks the name:

...,
methods: {
  checkName() {
    this.errorMessage = (this.name.length < 3) ? "Name too short" : null;
  }
}

This all works fine, but I have an animation on .field.error, and I’d like to wait until it finishes before clearing errorMessage.

.field {
  max-height: 0;
  transition: all 1s; // animate-out of error
}

.field.error {
  max-height: 3em;
  transition: all 0.6s; // animate-in to error
}

As it stands, checkName simultaneously (a) removes the error class on field and (b) clears errorMessage. Since errorMessage is cleared immediately, the animation is pointless (since the <div> is now empty…).

What I’d like is to have a 1 second delay between the removal of the error class from field, and errorMessage = null – to give enough time for the outgoing error animation to complete.

Is there a way to do this without having to introduce additional data values? (I’ve shown the above for one field, but I have 4 fields in total)

Given you’re emptying out (or nullifying) the errorMessage string, i think your only option is to use a setTimeout in your method before you set the value… Although i’m not sure how successful you’ll be there.

Or, if you’re okay with keeping the errorMessage as a static string of “Name too short”, you could perhaps wrap it with a transition and show/hide based on your validation…

<transition name="transition-error">
  <div v-if="name.length < 3" class="error-message">{{ errorMessage }}</div>
</transition>

And then you can set up your enter/leave animations for the transition-error in css.

Since the value is used in both the class as well as the errorMessage, delaying an update to the value would also delay the class being applied (which means the animation won’t trigger)

This is actually a simplified example of a more complex case, where the conditions are more involved and the error messages vary.