vue.js - Vuelidate & Tailwind:为什么我总是看到无效错误?
问题描述
对于我的一生,我似乎无法理解为什么我总是看到验证错误。逻辑运行良好,似乎都在我的: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 {
...
}
}
}
当我输入有效的电子邮件和/或密码时,验证错误就会消失。如果我尝试使用无效数据提交,验证器工作正常。使用有效的电子邮件/密码,我可以成功提交表单。
当页面第一次加载时,这就是我的表单的样子。如果字段无效,如何正确呈现表单以仅显示错误?
感谢您的任何建议!
解决方案
尝试将$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>
推荐阅读
- javascript - 当我尝试在我的反应应用程序上使用 npm start 时,我不断收到此错误
- typo3 - Typo3 后端注销后清漆不缓存 - be_typo3_user cookie 仍然存在
- jestjs - Jest Throw 错误:TypeError:node.addEventListener 不是函数
- django - 我在 Linux VM 上运行 Djanog runserver 时收到 AttributeError: module 'app' has no attribute 'helpers'
- git - 如何在 git 中获取标签的标题(不是提交)?
- javascript - JS;D3 条形图未定义错误:未捕获类型错误,无法读取属性
- c# - 泛型方法的调用是模棱两可的错误
- python - 如何获得正则表达式和行号的完全匹配?
- javascript - Uncaught (in promise) DOMException: Unable to decode audio data from pyAudio to JavaScript
- javascript - REST API - 连接困难