如何使用异步在 nuxtjs 中显示单独的错误消息答案

【问题标题】：How to show separate error messages in nuxtjs using async如何使用异步在 nuxtjs 中显示单独的错误消息
【发布时间】：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"
            />&nbsp;<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"
            />&nbsp;
            <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"
            />&nbsp;
            <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>

【问题讨论】：

标签： php typescript vue.js nuxt.js

【解决方案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
}

【讨论】：