vue2 同时校验多个表单以及表单校验失败原因分析及解决

使用Promise.all()同时校验多个表单

 // 表单校验函数
    checkForm(form) {
      return new Promise((resolve, reject) => {
        this.$refs[form].validate(valid => {
          console.log(valid)
          if (valid) {
            console.log(form)
            resolve()
          } else {
            console.log(form, 'reject')
            reject()
          }
        })
      })
    },
submitFn(form) {
      const formList = []
        formList.push(this.checkForm('mageDetail'))
        formList.push(this.checkForm('propertyRefS'))
        if (this.mageHexDetail.messageOutput) formList.push(this.checkForm('hexMesOutputFormS'))
        if (this.mageHexDetail.messageSave) formList.push(this.checkForm('hexSaveRefS'))
        Promise.all(formList).then(() => {
          this.$postByUrl(`/${window.infoFlag1}/collection-web/config_info/updateStringMessageConfig`, params).then((res) => {
              this.$message.success(this.$t('message.saveSuc'))
              this.queryStatisticsList()
            })
        }).catch(() => {})
    },

表单校验失败，打印this.$refs得到如下结果

 图中可以得出，通过this.$refs并不能拿到该组件示例，其对应的值是undefined，查看官方文档，官方给出的结论是ref不是响应式的，换而言之，如果初始未渲染该组件，通过状态数据改变再进行渲染，那得到的值就是undefined，而不是实时的组件实例或DOM

 而我模板中是使用v-if，条件为真的时候渲染改dom，为假则不渲染，当初始渲染时是true得到结果如下

 当初始渲染时是false，得到结果如下

解决方法：最终我使用v-show去替代了v-if，v-show无论真假都会渲染，这样就解决了问题，但是这样可能带来性能问题，看项目需要吧，我项目中并没有明确的要求，如果非得用v-if，那就考虑其他方法，期待有其他解决方法的大佬指点。