el-form 表單校驗(yàn) 異步問題 解決

問題描述:
一個(gè)新增頁面里有多個(gè)組件,在新增頁面對(duì)組件進(jìn)行 校驗(yàn) 必填項(xiàng)等,發(fā)現(xiàn)效驗(yàn)有異步問題;
之前寫法

// 提交效驗(yàn)
 handleSubmit() {
        this.subForm = JSON.parse(JSON.stringify(this.baseInfo))
            let _this = this
            let pass = true
            // 表單驗(yàn)證
            // 基本信息
               this.$refs.form1.$refs.baseInfo.validate((valid) => {
                    if (!valid) {
                        pass = false
                    }
                })
             if(pass) {
                // 調(diào)接口
              }
         }

異步原因:表單中有級(jí)聯(lián),下拉框等,是需要調(diào)接口的,需要時(shí)間,就會(huì)異步;
解決問題方法:使用 Promise

 let form1 = new Promise((resolve, reject) => {
      this.$refs.form1.$refs.baseInfo.validate((valid) => {
            if (!valid) {
                    pass = false
             }
         })
       resolve();
  })

Promise.all([form1,form2,form3,form4]).then(res => {
    if(pass) {
         // 接口請(qǐng)求
            _this.subForm.belongGridName = _this.baseInfo.belongGrid.join("->")
            _this.subForm.addressNow = _this.baseInfo.address.join("->") + "->" + _this.subForm.addressDetail
          this.loading = true
          this.$axios.post(////", this.subForm)
          .then((res) => {
              this.$message.success("新增成功")
              this.$router.back()
           })
            .catch(err=>{
              this.loading = false
              this.$message.error(err.message)
         })
   }
}).catch(err => {
     Console.log(err)
})
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容