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

 更新时间:2024年06月07日 10:25:11   作者:空中湖  
这篇文章主要介绍了vue elementui异步给dom赋值无效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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
      })()
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Nuxt.js 静态资源和打包的操作

    Nuxt.js 静态资源和打包的操作

    这篇文章主要介绍了Nuxt.js 静态资源和打包的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue实现列表无缝滚动

    vue实现列表无缝滚动

    这篇文章主要为大家详细介绍了vue实现列表无缝滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Vue3 之 Vue 事件处理指南

    Vue3 之 Vue 事件处理指南

    Vue事件处理是每个Vue项目的必要方面。 它用于捕获用户输入,共享数据以及许多其他创造性方式。在本文中,会介绍基础知识,并提供一些用于处理事件的代码示例。需要的小伙伴可以参考下面文章的具体内容
    2021-09-09
  • vue修改this.$confirm的文字样式、自定义样式代码实例

    vue修改this.$confirm的文字样式、自定义样式代码实例

    this.$confirm是一个 Vue.js 中的弹窗组件,其样式可以通过 CSS 进行自定义,下面这篇文章主要给大家介绍了关于vue修改this.$confirm的文字样式、自定义样式的相关资料,需要的朋友可以参考下
    2024-02-02
  • VueCli生产环境打包部署跨域失败的解决

    VueCli生产环境打包部署跨域失败的解决

    这篇文章主要介绍了VueCli生产环境打包部署跨域失败的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 100行代码实现一个vue分页组功能

    100行代码实现一个vue分页组功能

    今天用vue来实现一个分页组件,总体来说,vue实现比较简单,样式部分模仿了elementUI。接下来本文通过实例代码给大家介绍100行代码实现一个vue分页组功能,感兴趣的朋友跟随小编一起看看吧
    2018-11-11
  • Vue3中如何修改父组件传递到子组件中的值(全网少有!)

    Vue3中如何修改父组件传递到子组件中的值(全网少有!)

    大家都知道,vue是具有单向数据流的传递特性,下面这篇文章主要给大家介绍了关于Vue3中如何修改父组件传递到子组件中值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    这篇文章主要介绍了解决webpack vue 项目打包生成的文件,资源文件报404问题的修复方法,需要的朋友可以参考下
    2018-01-01
  • 解决VuePress页面乱码问题

    解决VuePress页面乱码问题

    这篇文章主要介绍了解决VuePress页面乱码问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 最全vue的vue-amap使用高德地图插件画多边形范围的示例代码

    最全vue的vue-amap使用高德地图插件画多边形范围的示例代码

    这篇文章主要介绍了最全vue的vue-amap使用高德地图插件画多边形范围,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07

最新评论