Vue.js和Vee验证-如何更新包含错误的错误消息
Vue.js和Vee验证-如何更新包含错误的错误消息
提问于 2018-07-31 00:33:39
我正在尝试将来自vee-validate的错误消息设置为来自API的错误消息。
<div class="col-md-12">
<label for="company-contact-name" class="label-input">Company Contact Name</label>
<input v-validate="validations.user.name" v-model="data.user.name" id="company-contact-name" class="form-control" type="text" name="name" placeholder="Enter contact name" />
<div id="name-error" class="msg-error text-danger">{{ errors.first('name') }}</div>
</div>
<div class="col-md-12">
<label for="email" class="label-input">E-mail address</label>
<input v-validate="validations.user.email" v-model="data.user.email" id="email" class="form-control" type="email" name="email" placeholder="Enter e-mail" />
<div id="email-error" class="msg-error text-danger">{{ errors.first('email') }}</div>
</div>因此，如果接口返回电子邮件错误，我想将上面的"errors.first(' email ')“编辑为接口错误。然后，当用户开始更正该字段时，Vee验证将显示其配置的错误。
这是一个可能的错误数组的示例：
[
{id: "name", title: "Name is invalid. It should have only letters"},
{id: "name", title: "Name is too short. It should have more than three characters"},
{id: "email", title: "Email has already been taken"}
]如何处理API错误消息？
感谢您的时间和关注。
回答 1
Stack Overflow用户
发布于 2018-07-31 02:20:33
可能是这样的-创建一个新的验证器来检查API是否返回了错误消息，如果是，则返回该错误消息。然后使用这个新的验证器作为字段的第一个验证器，但也要为电子邮件地址添加内置的验证器。
<input
v-validate="api_email|email"
v-model="user.email"
id="email"
class="form-control"
type="email"
name="email"
placeholder="Enter e-mail" />
<script>
import { Validator } from 'vee-validate';
export default
{
data()
{
api_error: '',
user:
{
email: ''
}
},
mounted()
{
Validator.extend('api_email',
{
getMessage: this.emailError,
validate: this.validateEmail
});
},
methods:
{
validateEmail(value, args)
{
return !this.api_error;
},
emailError(field, args)
{
return this.api_error;
}
}
}
</script>更新
如果你想支持一个错误数组，也许你可以这样做
<div id="email-error" class="msg-error text-danger" v-for="err in [errors.first('email')].concat(array_with_api_errors.map(item => item.title))">{{ err }}</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51598537
复制相关文章
相似问题