Vuelidate & Tailwind：为什么我总是看到无效错误？答案

【问题标题】：Vuelidate & Tailwind: Why am I always seeing invalid errors?Vuelidate & Tailwind：为什么我总是看到无效错误？
【发布时间】：2021-03-16 21:50:33
【问题描述】：

对于我的一生，我似乎无法理解为什么我总是看到验证错误。逻辑运行良好，似乎都在我的:class 绑定中，我完全错了。我知道当我弄清楚这一点时我会觉得很傻，但是在经历了无数次教程之后，我觉得我已经从字面上复制/粘贴了，我仍然在同一条船上。

这是我的电子邮件模板。密码输入一样...

<div class="relative">
    <label for="email" class="sr-only block text-sm font-medium leading-5 text-gray-700">
        Email address
    </label>
    <input type="email"
        id="email"
        v-model.trim="$v.user.email.$model"
        :class="{ 'border-red-500': !$v.user.email.required}"
        placeholder="Email"
        class="mt-1 placeholder-gray-400 shadow appearance-none border rounded w-full py-3 px-3 text-gray-700 leading-tight transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:outline-none focus:border-gray-400 focus:shadow-outline-gray"
    />
    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none" 
        v-if="!$v.user.email.required">
              <svg
                  class="h-5 w-5 text-red-500"
                  fill="currentColor"
                  viewBox="0 0 20 20"
              >
                <path
                    fill-rule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                    clip-rule="evenodd"
                />
              </svg>
            </div>
        </div>
    <div>
    <p class="mt-2 text-sm text-red-600" v-if="!$v.user.email.required">
        Email is required
    </p>
    <p class="mt-2 text-sm text-red-600" v-if="!$v.user.email.email">
        Please use a valid email address
    </p>
</div>

这是我的脚本块的样子：

data: () => ({
    errors: false,
    user: {
      email: "",
      password: "",
    },
  }),


validations: {
    user: {
      email: { required, email },
      password: { required },
    },
  },

methods: {
    async handleSignIn() {
      this.$v.user.$touch();
      this.empty = !this.$v.user.$anyDirty;
      this.errors = this.$v.user.$anyError;

      if (this.$v.$invalid) {
        this.errors = true;
      } else {
        try {
            ...
        }
      }
   }

当我输入有效的电子邮件和/或密码时，验证错误就会消失。如果我尝试使用无效数据提交，验证器工作正常。使用有效的电子邮件/密码，我可以成功提交表单。

页面首次加载时，我的表单如下所示。如何正确呈现表单以仅在字段无效时显示错误？

感谢您的任何建议！

【问题讨论】：

在输入之前会发生这种情况吗？
是的，上图是页面加载时发生的事情——没有用户交互。如果我开始输入，验证会接管并按预期清除。

标签： vue.js tailwind-css vuelidate

【解决方案1】：

尝试将$v.user.email.$error条件添加到边框类绑定、图标和错误信息中：

<div id="app">
  <div class="relative">
    <label for="email" class="sr-only block text-sm font-medium leading-5 text-gray-700">
      Email address
    </label>
    <input type="email" id="email" v-model.trim="$v.user.email.$model" :class="{ 'border-red-500': $v.user.email.$error}" placeholder="Email" class="mt-1 placeholder-gray-400 shadow appearance-none border rounded w-full py-3 px-3 text-gray-700 leading-tight transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:outline-none focus:border-gray-400 focus:shadow-outline-gray" />
    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none" v-if="!$v.user.email.required">
      <svg v-if="$v.user.email.$error" class="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
      </svg>
    </div>
  </div>
  <div>
    <p class="mt-2 text-sm text-red-600" v-if="$v.user.email.$error">
      Email is required
    </p>
    <p class="mt-2 text-sm text-red-600" v-if="!$v.user.email.email">
      Please use a valid email address
    </p>
    <button class="rounded w-full flex justify-center text-gray-100 bg-purple-700 hover:bg-purple-800 px-6 py-2 flex items-center">
      Submit
    </button>
  </div>
</div>

LIVE DEMO

【讨论】：