vue elementui异步给dom赋值无效问题_Vue.js

vue elementui异步给dom赋值无效

最近在研究el-admin，角色管理里面有个功能是点击左侧的表格里面的一个角色，右侧的树就会自动初始化。

于是我在点击的方法里面，去后台异步调用了一下接口，然后返回数据并把数据赋值给menuids，但是我发现这个异步请求获取到的数据压根就不能让树控件刷新。

代码如下：

我是在handlecurrentchange里面操作的，网上说通过push方法能够起作用，但是根本没用，最后我的解决方法如下，先将ids都存储起来，然后再在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
      // 这个代码解决了树控件的半选问题。参考链接如上
      /*ids.foreach((i, n) => {
        var node = this.$refs.menu.getnode(i);
        console.log(node.isleaf)
        if (node.isleaf) {
          this.$refs.menu.setchecked(node, true);
        }
      });*/
    },
    // 触发单选
    handlecurrentchange(val) {
      console.log("handlecurrentchange")
      if (val) {
        const _this = this
        // 清空菜单的选中
        this.$refs.menu.setcheckedkeys([])
        // 保存当前的角色id
        this.currentid = val.id
        // this.showbutton = this.level <= val.level
        // 初始化
        this.initmenus(val)
        // 菜单数据需要特殊处理
        /*val.menus.foreach(function (data, index) {
          _this.menuids.push(data.id)
        })*/
      }
    },

vue elementui前端异步方法转同步

elementui的表单验证功能

表单验证方法如果传入回调函数时是异步的

// 子组件的方法
validateform(){
      this.$refs.jsoneditor.getref("form").validate((valid, hints) => {
        return {valid: valid, hints: hints}
      })
}
 
// 父组件调用,会发现校验结果,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})
      //   })
      // })
      //或者根据官网文档说明可以不传入回调函数,直接validate
      return this.$refs.jsoneditor.getref("form").validate
    },
 
// 父组件调用
submitall(){
      // this.$refs.resourceeditorref.foreach((item, index) => {
      //   console.log("校验结果", item.validateform())
      // })
      this.$refs.resourceeditorref.foreach(async (item, index) => {
        let {valid, hints} = await item.validateform()
        console.info(valid, hints)
        console.log("校验结果", hints)
      })
}

但是其实上面 submitall 的 foreach 是有问题, 需要改成传统的for遍历, 因为 foreach 的入参是一个回调函数 , 简单的说就是执行 foreach 后会马上执行foreach后面的代码

所以修改成普通的for , 使用普通 for 循环的时候有需要多包一层

// 子组件方法
validateform(){
      //或者根据官网文档说明可以不传入回调函数,直接validate
      return this.$refs.jsoneditor.getref("form").validate
    }
 
//父组件调用
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("表单校验",res)
          }).catch(res => {
            console.log("表单校验catch",res)
            if(res == false){
              this.$message({ type: "error", message: "表单校验失败" });
              // 有一个校验失败则直接返回
              return;
            }
          })
        }
        //后续操作
        
      })()
}

或者

// 子组件方法
validateform(){
      return new promise((resolve, reject) => {
        this.$refs.jsoneditor.getref("form").validate((valid, hints) => {
          resolve({valid, hints})
        })
      })
}
 
// 父调用
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("表单校验valid",valid)
          console.log("表单校验hints",hints)
          debugger
        }
        //后续操作
        debugger
      })()
}