如何使用异步在 nuxtjs 中显示单独的错误消息
Posted
技术标签:
【中文标题】如何使用异步在 nuxtjs 中显示单独的错误消息【英文标题】：How to show separate error messages in nuxtjs using async 【发布时间】：2020-11-18 22:55:38 【问题描述】：我有一个检查的公共函数
-
输入的邮箱是否已经存在。
如果输入的代码与被邀请学校的代码匹配。
现在该函数显示 2 个错误，即使其中只有一个错误。 我无法独立显示错误。我刚刚开始挖掘代码并试图帮助这里的朋友。不知道我在做什么。
下面是 服务器端的ApplicantUserController.php
public function existEmailCode(UserExistEmailCodeRequest $request)
$data = $request->validationData();
$exist = ApplicantUser::whereEmail($data['email'])->exists()
|| School::whereQrPathPassword($data['school_code'])->doesntExist();
return new ExistResource1(['exist' => $exist]);
下面是学生端 index.vue
<template>
<div class="login-container signup">
<ValidationObserver ref="observer1" tag="div">
<InputComponent
v-if="currentPage === 1"
:multilinguals="multilinguals"
:lang="lang"
:val.sync="property"
@next="onNextPage"
/>
..........
beforeMount()
const token = this.$route.query.id
if (token === null || token === undefined)
// @ts-ignore
this.$toast.show(this.multilinguals.texts['26'][this.getLang()],
type: 'error',
duration: 3000
)
// @ts-ignore
this.$router.push('/')
return
if (typeof token === 'string')
this.property.token = token
this.unsubscribe.push(
// @ts-ignore
this.applicantUser.$subscribe(
'setNetworkState',
(payload: NetworkStatus) =>
if (
this.applicantUser.actionType ===
ApplicantUserActionType.ExistEmailCode
)
if (payload === NetworkStatus.SUCCESS)
if (!this.applicantUser.emailCodeExist?.exist)
this.pageIndex = 2
return
// @ts-ignore
this.$refs.observer1.setErrors(
email: this.multilinguals.texts['27'][this.getLang()],
school_code: this.multilinguals.texts['43'][this.getLang()]
)
else if (payload === NetworkStatus.ERROR)
...............
async onNextPage()
// @ts-ignore
const validateResult = await this.$refs.observer1.validate()
if (
!validateResult ||
this.applicantUser.networkState === NetworkStatus.PROGRESS
)
return
this.applicantUser.existEmailCode(
email: this.property.email,
school_code: this.property.school_code
)
input.vue
<template>
<div>
<h1>
<MultiLingual index="1" :texts="multilinguals.texts" :lang="lang" />
</h1>
<div class="row mb-50">
<div class="col-md-7 bdRight col-12">
<div class="form-group required">
<label class="control-label">
<MultiLingual
index="3"
:texts="multilinguals.texts"
:lang="lang"
/> <span class="requiredTag"
><MultiLingual index="2" :texts="multilinguals.texts" :lang="lang"
/></span>
</label>
<ValidationInput
class-name="form-control"
input-type="email"
:multi-lingual="
index: 3,
texts: multilinguals.texts,
lang: lang
"
element-id="email"
rules="required|email"
:value.sync="property.email"
place-holder="example@example.com"
/>
</div>
<div class="form-group required">
<label class="control-label">
<MultiLingual
index="4"
:texts="multilinguals.texts"
:lang="lang"
/>
<span class="requiredTag">
<MultiLingual
index="2"
:texts="multilinguals.texts"
:lang="lang"
/>
</span>
</label>
<ValidationInput
class-name="form-control"
input-type="password"
:multi-lingual="
index: 4,
texts: multilinguals.texts,
lang: lang
"
element-id="password"
rules="required|password"
:value.sync="property.password"
/>
<span class="text-sm">
<MultiLingual index="5" :texts="multilinguals.texts" :lang="lang" />
</span>
</div>
<div class="form-group required">
<label class="control-label">
<MultiLingual
index="6"
:texts="multilinguals.texts"
:lang="lang"
/>
<span class="requiredTag">
<MultiLingual
index="2"
:texts="multilinguals.texts"
:lang="lang"
/>
</span>
</label>
<ValidationInput
class-name="form-control"
:value.sync="property.school_code"
input-type="text"
element-id="school_code"
place-holder="9999"
:multi-lingual="
index: 6,
texts: multilinguals.texts,
lang: lang
"
max-length="4"
rules="required|numeric|min:4"
/>
<span class="text-sm">
<MultiLingual index="7" :texts="multilinguals.texts" :lang="lang" />
</span>
</div>
<hr />
<div class="termsCheckContainer">
<ValidationProvider
v-slot=" errors "
vid="checked"
:rules=" required: allowFalse: false "
>
<input v-model="property.checked" type="checkbox" :value="1" />
<span>
<MultiLingual
index="8"
:texts="multilinguals.texts"
:lang="lang"
/>
</span>
<div
v-if="errors.length"
style="display: block"
class="invalid-feedback"
>
multilinguals.texts['28'][getLang()]
</div>
</ValidationProvider>
</div>
<a class="btn btn-primary btn-lg btn-block" @click.prevent="onNext">
<MultiLingual index="9" :texts="multilinguals.texts" :lang="lang" />
</a>
</div>
<div class="col-md-5 d-none">
<p class="welcomeSideText">
<MultiLingual index="10" :texts="multilinguals.texts" :lang="lang" />
</p>
<div class="sideIllust">
<img src="~assets/images/img/img-slider-img.png" />
</div>
</div>
</div>
<hr />
<div class="tipsContainer text-left mb-30">
<MultiLingual index="11" :texts="multilinguals.texts" :lang="lang" />
</div>
<div class="haveAccount">
<MultiLingual index="12" :texts="multilinguals.texts" :lang="lang" />
<nuxt-link to="/signin">
<MultiLingual index="13" :texts="multilinguals.texts" :lang="lang" />
</nuxt-link>
</div>
</div>
</template>
<script lang="ts">
import Component, Prop, PropSync from 'nuxt-property-decorator'
import BaseVue from '~/pages/base'
// @ts-ignore
import MultiLingual from '@/components/MultiLingual'
import ValidationInput from '~/components/ValidationInput.vue'
import IApplicantUserAddRequest from '~/repositories/request/ApplicantUserRequest'
@Component(
components:
ValidationInput,
MultiLingual
)
export default class InputComponent extends BaseVue
@Prop()
multilinguals!: any
@Prop()
lang?: string
@PropSync('val')
property!: IApplicantUserAddRequest
onNext()
this.$emit('next')
</script>
【问题讨论】：
【参考方案1】：如果有意义的话，我通过一一检查解决了这个问题。 在服务器端
public function existEmailCode(UserExistEmailCodeRequest $request)
$data = $request->validationData();
return new ExistResource1(['emailExist'=>ApplicantUser::whereEmail($data['email'])->exists(),
'schoolCodeExist'=>School::whereQrPathPassword($data['school_code'])->doesntExist()]);
在客户端。
this.unsubscribe.push(
// @ts-ignore
this.applicantUser.$subscribe(
'setNetworkState',
(payload: NetworkStatus) =>
if (
this.applicantUser.actionType ===
ApplicantUserActionType.ExistEmailCode
)
if (payload === NetworkStatus.SUCCESS)
if (
!this.applicantUser.emailCodeExist?.emailExist &&
!this.applicantUser.emailCodeExist?.schoolCodeExist
)
this.pageIndex = 2
return
// @ts-ignore
this.$refs.observer1.setErrors(
email: [],
school_code: []
)
if (this.applicantUser.emailCodeExist?.emailExist)
// @ts-ignore
this.$refs.observer1.setErrors(
email: this.multilinguals.texts['27'][this.getLang()]
)
if (this.applicantUser.emailCodeExist?.schoolCodeExist)
// @ts-ignore
this.$refs.observer1.setErrors(
school_code: this.multilinguals.texts['43'][this.getLang()]
)
else if (payload === NetworkStatus.ERROR)
// @ts-ignore
this.$toast.show(
this.multilinguals.common['25'][this.getLang()],
type: 'error',
duration: 3000
)
else if (
this.applicantUser.actionType === ApplicantUserActionType.Add
)
if (payload === NetworkStatus.SUCCESS)
this.$router.push('/dashboard')
else if (payload === NetworkStatus.ERROR)
// @ts-ignore
this.$toast.show(
this.multilinguals.common['25'][this.getLang()],
type: 'error',
duration: 3000
)
)
)
async onNextPage()
// @ts-ignore
const validateResult = await this.$refs.observer1.validate()
if (
!validateResult ||
this.applicantUser.networkState === NetworkStatus.PROGRESS
)
return
this.applicantUser.existEmailCode(
email: this.property.email,
school_code: this.property.school_code
)
用户.ts
// @ts-ignore
@action
// eslint-disable-next-line camelcase
async existEmailCode(payload: IApplicantUserEmailCodeExistRequest)
this.setActionType(ApplicantUserActionType.ExistEmailCode)
this.setNetworkState(NetworkStatus.PROGRESS)
try
const response = await ApplicantUserRepository.existEmailCode(payload)
this.setExistEmailCode(response.data)
this.setNetworkState(NetworkStatus.SUCCESS)
return response
catch (e)
console.error(e)
this.setError(e)
this.setNetworkState(getErrorStatus(e))
在 userrequest.ts 上
export interface IApplicantUserEmailCodeExistRequest
email: string
school_code: string
【讨论】：
以上是关于如何使用异步在 nuxtjs 中显示单独的错误消息的主要内容，如果未能解决你的问题，请参考以下文章
使用 Flutter，如何在单独的登录页面小部件中显示在 AuthService 类中捕获的 Firebase Auth 错误消息？