在 Vue 中验证多个 ValidationObserver

如何解决在 Vue 中验证多个 ValidationObserver

我有一个 ChangeInfo 屏幕，它由与三个 ValidationObserver 对应的三个组件组成。如果这三个都有效，我将设置变量 showModal = true 以显示成功的通知模式。但是如果三个中的一个有错误，showModal 将是 false 和 console.log("Failed") 报告失败。如果所有 3 个都有效，我的函数工作正常，但只有 console.log("Failed") 与第一个 If 案例。这是我的代码，你们可以看到triggerSubmit() function

<template>
  <div class="d-block">
    <ValidationObserver ref="profile" tag="div">
      <ShowProfile
        :isUpdatedProfile="isUpdatedProfile"
        @update-profile="updateProfile"
      />
    </ValidationObserver>

    <ValidationObserver ref="workInfo" tag="div">
      <ShowWorkInfo
        :isUpdatedWorkInfo="isUpdatedWorkInfo"
        @update-work-info="updateWorkInfo"
      />
    </ValidationObserver>

    <ValidationObserver ref="personalInfo" tag="div">
      <ShowPersonalInfo
        :isUpdatedPersonalInfo="isUpdatedPersonalInfo"
        @update-personal-info="updatePersonalInfo"
      />
    </ValidationObserver>

    <div class="w--27 mw-100 mx-auto my-9">
      <button
        @click="triggerSubmit"
        v-b-modal="'modal-info'"
        class="btn btn-primary w-100"
      >
        {{ $t('common.btn.btn_update') }}
      </button>
    </div>
    <Modalinfo v-if="showModal" :infoMess="$t('common.message.updated')" />
  </div>
</template>

<script lang="ts">
import { Component,Vue } from 'vue-property-decorator'
import { veevalidateObserverRef } from '@/models/Common/Validation'
import { getModule } from 'vuex-module-decorators'
import ShowProfile from './Components/ShowProfile.vue'
import ShowWorkInfo from './Components/ShowWorkInfo.vue'
import ShowPersonalInfo from './Components/ShowPersonalInfo.vue'
import Modalinfo from '@/components/Modal/Modalinfo.vue'
import information from '@/store/modules/information'
import store from '@/store'
import axios from 'axios'

const informationModule = getModule(information,store)

@Component({
  components: {
    ShowProfile,ShowWorkInfo,ShowPersonalInfo,Modalinfo
  }
})
export default class ChangeInfo extends Vue {
  $refs!: {
    workInfo: veevalidateObserverRef
    personalInfo: veevalidateObserverRef
    profile: veevalidateObserverRef
  }
  public isUpdatedWorkInfo: boolean = false
  public isUpdatedProfile: boolean = false
  public isUpdatedPersonalInfo: boolean = false
  private showModal: boolean = false
  public infoMess!: string

  updateProfile(profile: any) {
    axios
      .put('https://609b82962b549f00176e394f.mockapi.io/profile/1',{
        recent_situation: profile.recent_situation,email: profile.email,avatar: profile.avatar,last_name: profile.last_name,first_name: profile.first_name,furigana_lastname: profile.furigana_lastname,furigana_firstname: profile.furigana_firstname,self_introduction: profile.self_introduction
      })
      .then(response => {
        profile = response.data
        console.log(profile)
      })
      .catch(error => console.log(error))
    this.isUpdatedProfile = false
    profile.recent_situation = ''
    profile.email = ''
    profile.last_name = ''
    profile.first_name = ''
    profile.furigana_lastname = ''
    profile.furigana_firstname = ''
    profile.self_introduction = ''
    this.$refs.profile.reset()
  }

  updateWorkInfo(workInfo: any) {
    axios
      .put('https://609b82962b549f00176e394f.mockapi.io/work_info/1',{
        status: workInfo.status,company: workInfo.company,department: workInfo.department,position: workInfo.position,postcode: workInfo.postcode,prefectures: workInfo.prefectures,district: workInfo.district,address: workInfo.address,building: workInfo.building,phone_numbers: workInfo.phone_numbers,urls: workInfo.urls
      })
      .then(response => {
        workInfo = response.data
        console.log(workInfo)
        informationModule.CHANGE_WORK_INFO(workInfo)
      })
      .catch(error => console.log(error))
    this.isUpdatedWorkInfo = false
    workInfo.status = false
    workInfo.company = ''
    workInfo.department = ''
    workInfo.position = ''
    workInfo.postcode = ''
    workInfo.prefectures = ''
    workInfo.district = ''
    workInfo.address = ''
    workInfo.building = ''
    workInfo.phone_numbers = [{ phone: '' }]
    workInfo.urls = [{ url: '' }]
    this.$refs.workInfo.reset()
  }

  updatePersonalInfo(personalInfo: any,gender_selected: any) {
    axios
      .put('https://609b82962b549f00176e394f.mockapi.io/personal_info/1',{
        gender: gender_selected,nearest_station: personalInfo.nearest_station,postcode: personalInfo.postcode,prefectures: personalInfo.prefectures,district: personalInfo.district,address: personalInfo.address,building: personalInfo.building,phone_numbers: personalInfo.phone_numbers,urls: personalInfo.urls
      })
      .then(response => {
        personalInfo = response.data
        console.log(personalInfo)
        informationModule.CHANGE_PERSONAL_INFO(personalInfo)
      })
      .catch(error => console.log(error))
    this.isUpdatedPersonalInfo = false
    personalInfo.nearest_station = ''
    personalInfo.postcode = ''
    personalInfo.prefectures = ''
    personalInfo.district = ''
    personalInfo.address = ''
    personalInfo.building = ''
    personalInfo.phone_numbers = [{ phone: '' }]
    personalInfo.urls = [{ url: '' }]
    this.$refs.personalInfo.reset()
  }

  triggerSubmit() {
    this.$refs.profile.validate().then(isValidate => {
      if (isValidate) {
        this.$refs.workInfo.validate().then(isValidate => {
          if (isValidate) {
            this.$refs.personalInfo.validate().then(isValidate => {
              if (isValidate) {
                this.showModal = true
                this.isUpdatedWorkInfo = true
                this.isUpdatedPersonalInfo = true
                this.isUpdatedProfile = true
              }
            })
          }
        })
      } else {
        console.log('Failed')
      }
    })
    this.showModal = false
  }
}
</script>

另外，有没有更好的方法来编写这个函数？

解决方法

使用异步/等待

checkProfile(){
  return this.$refs.profile.validate()
},checkWorkInfo(){
  return this.$refs.workInfo.validate()
},checkPersonalInfo(){
  return this.$refs.personalInfo.validate()
},async triggerSubmit() {
 const profileValidate = await checkProfile()
 const workInfoValidate = await checkWorkInfo()
 const personalInfoValidate = await checkPersonalInfo()
 if(profileValidate && workInfoValidate && personalInfoValidate)
  this.showModal = true
 else {
  this.showModal = false
  console.log("Failed")
 }
}