延迟更新 Vue 中的数据值

Question

我有以下输入字段，下面有一条错误消息：

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

..和checkName方法，其中..好吧，检查名称：

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

这一切都很好用，但我在.field.error上有一个动画，我想等到它完成再清除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
}

就目前而言，checkName同时 (a( 删除现场的error类和 (b( 清除errorMessage 。由于errorMessage立即被清除，因此动画毫无意义(因为<div>现在是空的..(。

我想要的是，在从字段中删除error类和errorMessage = null类之间有 1 秒的延迟 - 以便有足够的时间完成传出错误动画。

有没有办法做到这一点而不必引入额外的data值？(我已经为一个字段显示了上述内容，但我总共有 4 个字段(

Answer 1

您可以使用name来切换类error。

要么像这样：

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

或通过计算方法：

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

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

我推荐后者，特别是如果您想使用多个错误情况(即"名称太长"、"无效字符"......

但是你必须承认初始状态。由于name.length最初为 0，因此您最初会显示错误 - 这可能是不需要的。

对于验证(包括错误消息处理(，您还可以使用像Vuelidate这样的插件。