我有一个需要 3 个输入代码的表单。首先,我的项目检查代码是否满足正则表达式验证,然后发送到后端。我在我的英雄中有一个响应,我的问题是过滤特定输入代码的错误消息。如果输入失败,我的目标是显示一个准确的错误,如 {{this.form.code1.error }}。我试图匹配各种可能的响应。
我的 (e) 对象看起来像这样
{
"message": "code not found",
"path": [
"validate"
],
"extensions": {
"code": "CODE_NOT_FOUND",
"value": "VBJCBGB6JJ"
}
},
{
"message": "code not found",
"path": [
"validate"
],
"extensions": {
"code": "CODE_NOT_FOUND",
"value": "HH6F3JPMWF"
}
},
{
"message": "code not found",
"path": [
"validate"
],
"extensions": {
"code": "CODE_NOT_FOUND",
"value": "4FHRXE2GGN"
}
}
]
我正在尝试使用此函数剖析和映射值
showErrors(e) {
let valid = true
console.log(e)
e.forEach((e) => {
console.log('inside for each')
if (e.message === 'code not found') {
this.form.code1.valid = false
valid = false
this.form.code1.error =
'Invalid code. Try again or see FAQ’s for help.'
}
if (e.message === 'code used') {
this.form.code2.valid = false
valid = false
this.form.code2.error = 'Code has already been redeemed.'
} else {
this.form.code1.valid = true
this.form.code1.error = ''
}
return valid
})
这是我的参考模板
.form-wrapper
.row
.input-container
input(type="text" name="Code 1" placeholder="Code 1" v-model="form.code1.value" :class="{ error: form.code1.valid === false}" minlength="10").check
//- .error-msg(v-if="form.code1.valid === false") {{form.code1.error}}
.input-container
input(type="text" name="Code 2" placeholder="Code 2" v-model="form.code2.value" :class="{ error: form.code2.valid === false}" minlength="10").check
//- .error-msg(v-if="form.code2.valid === false") {{form.code2.error}}
.input-container
input(type="text" name="Code 3" placeholder="Code 3" v-model="form.code3.value" :class="{ error: form.code3.valid === false}" minlength="10").check
//- .error-msg(v-if="form.code3.valid === false") {{form.code3.error}}
.row
.select-container
select(v-model="form.retailer.value" :class="{ selected: form.retailer.value !== '', error: form.retailer.valid === false }")#select
option(value="" disabled selected) Where did you shop?
option(v-for="option in stores") {{ option.text }}
.error-msg(v-if="form.retailer.valid === false") {{form.retailer.error}}
.error-msg(v-if="form.code1.valid === false") {{form.code1.error}}
.error-msg(v-if="form.code2.valid === false") {{form.code2.error}}
.cta.bg-blue-dark.inline-block.cursor-pointer.disabled#submit(@click="onSubmit" :disabled="!valid" class='hover:bg-blue-500 md:mt-7' type='submit') {{ buttonText }}
我觉得我在这里缺少联系。我希望能够显示“代码已经兑换”或“无效代码”或“代码不知道”或返回的任何错误但与该代码条目相关。提前致谢!