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秒的延迟，以便有足够的时间完成传出的错误动画。 / p>

有没有一种方法而不必引入其他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之类的插件。

延迟更新Vue中的数据值

1 个答案: