快捷導(dǎo)航

vue elementui異步給dom賦值無(wú)效問題

更新時(shí)間：2024年06月07日 10:25:11 作者：空中湖

這篇文章主要介紹了vue elementui異步給dom賦值無(wú)效問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue elementui異步給dom賦值無(wú)效

最近在研究el-admin，角色管理里面有個(gè)功能是點(diǎn)擊左側(cè)的表格里面的一個(gè)角色，右側(cè)的樹就會(huì)自動(dòng)初始化。

于是我在點(diǎn)擊的方法里面，去后臺(tái)異步調(diào)用了一下接口，然后返回?cái)?shù)據(jù)并把數(shù)據(jù)賦值給menuIds，但是我發(fā)現(xiàn)這個(gè)異步請(qǐng)求獲取到的數(shù)據(jù)壓根就不能讓樹控件刷新。

代碼如下：

我是在handleCurrentChange里面操作的，網(wǎng)上說通過push方法能夠起作用，但是根本沒用，最后我的解決方法如下，先將ids都存儲(chǔ)起來(lái)，然后再在nextTick方法里面去給menuIds賦值。

async initMenus(val) {
      this.menuIds = []
      const AV = window.AV
      const role = AV.Object.createWithoutData('Role', val.objectId);
      const roleMenuQuery = new AV.Query('RoleMenu');
      roleMenuQuery.equalTo("role", role)
      roleMenuQuery.include("menu")
      var roleMenus = await roleMenuQuery.find()
      var ids = [];
      roleMenus.forEach(roleMenu => {
        var roleMenuJson = roleMenu.toJSON()
        ids.push(roleMenuJson.menu.menuId)
      })
      this.$nextTick(() => {
        this.menuIds = ids;
      })
      // https://blog.csdn.net/xudalin/article/details/103158941
      // 這個(gè)代碼解決了樹控件的半選問題。參考鏈接如上
      /*ids.forEach((i, n) => {
        var node = this.$refs.menu.getNode(i);
        console.log(node.isLeaf)
        if (node.isLeaf) {
          this.$refs.menu.setChecked(node, true);
        }
      });*/
    },
    // 觸發(fā)單選
    handleCurrentChange(val) {
      console.log("handleCurrentChange")
      if (val) {
        const _this = this
        // 清空菜單的選中
        this.$refs.menu.setCheckedKeys([])
        // 保存當(dāng)前的角色id
        this.currentId = val.id
        // this.showButton = this.level <= val.level
        // 初始化
        this.initMenus(val)
        // 菜單數(shù)據(jù)需要特殊處理
        /*val.menus.forEach(function (data, index) {
          _this.menuIds.push(data.id)
        })*/
      }
    },

vue elementui前端異步方法轉(zhuǎn)同步

elementui的表單驗(yàn)證功能

表單驗(yàn)證方法如果傳入回調(diào)函數(shù)時(shí)是異步的

// 子組件的方法
validateForm(){
      this.$refs.jsonEditor.getRef("form").validate((valid, hints) => {
        return {valid: valid, hints: hints}
      })
}
 
// 父組件調(diào)用,會(huì)發(fā)現(xiàn)校驗(yàn)結(jié)果,hints為undefine
submitAll(){
      this.$refs.resourceEditorRef.forEach((item, index) => {
        console.log(item.validateForm())
      })
}

修改成同步的

// 子組件方法
validateForm(){
      // this.$refs.jsonEditor.getRef("form").validate((valid, hints) => {
      //   return {valid: valid, hints: hints}
      // })
      // return new Promise((resolve, reject) => {
      //   this.$refs.jsonEditor.getRef("form").validate((valid, hints) => {
      //     resolve({valid, hints})
      //   })
      // })
      //或者根據(jù)官網(wǎng)文檔說明可以不傳入回調(diào)函數(shù),直接validate
      return this.$refs.jsonEditor.getRef("form").validate
    },
 
// 父組件調(diào)用
submitAll(){
      // this.$refs.resourceEditorRef.forEach((item, index) => {
      //   console.log("校驗(yàn)結(jié)果", item.validateForm())
      // })
      this.$refs.resourceEditorRef.forEach(async (item, index) => {
        let {valid, hints} = await item.validateForm()
        console.info(valid, hints)
        console.log("校驗(yàn)結(jié)果", hints)
      })
}

但是其實(shí)上面 submitAll 的 forEach 是有問題, 需要改成傳統(tǒng)的for遍歷, 因?yàn)?forEach 的入?yún)⑹且粋€(gè)回調(diào)函數(shù) , 簡(jiǎn)單的說就是執(zhí)行 forEach 后會(huì)馬上執(zhí)行forEach后面的代碼

所以修改成普通的for , 使用普通 for 循環(huán)的時(shí)候有需要多包一層

// 子組件方法
validateForm(){
      //或者根據(jù)官網(wǎng)文檔說明可以不傳入回調(diào)函數(shù),直接validate
      return this.$refs.jsonEditor.getRef("form").validate
    }
 
//父組件調(diào)用
submitAll(){
      (async () => {
        let submitAllForm = {};
        for (let index = 0; index < this.$refs.resourceEditorRef.length; index++) {
          const item = this.$refs.resourceEditorRef[index]
          await item.validateForm().then(res => {
            console.log("表單校驗(yàn)",res)
          }).catch(res => {
            console.log("表單校驗(yàn)catch",res)
            if(res == false){
              this.$message({ type: "error", message: "表單校驗(yàn)失敗" });
              // 有一個(gè)校驗(yàn)失敗則直接返回
              return;
            }
          })
        }
        //后續(xù)操作
        
      })()
}

或者

// 子組件方法
validateForm(){
      return new Promise((resolve, reject) => {
        this.$refs.jsonEditor.getRef("form").validate((valid, hints) => {
          resolve({valid, hints})
        })
      })
}
 
// 父調(diào)用
submitAll(){
      (async () => {
        let submitAllForm = {};
        for (let index = 0; index < this.$refs.resourceEditorRef.length; index++) {
          const item = this.$refs.resourceEditorRef[index]
          let {valid, hints} = await item.validateForm();
          console.log("表單校驗(yàn)valid",valid)
          console.log("表單校驗(yàn)hints",hints)
          debugger
        }
        //后續(xù)操作
        debugger
      })()
}