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)
        })*/
      }
    },

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vue.js 中的 `watch` 选项默认是同步执行的,但是如果你在 `watch` 回调函数中进行异步操作时,可能会遇到赋值异步的问题。这是因为 JavaScript 中的异步操作,例如 `setTimeout` 和 `fetch` 等,会先于同步代码执行完毕,所以当异步操作完成时,`watch` 回调函数可能已经执行完毕,并且已经将新值赋值给了对应的数据。 为了解决这个问题,Vue.js 提供了一个 `$nextTick` 方法,可以让回调函数在 DOM 更新之后再执行。你可以在 `watch` 回调函数中使用 `$nextTick` 方法来确保赋值异步操作的正确性,例如: ```javascript watch: { myData: { handler(newValue) { // 异步操作,例如 fetch fetch('/api/data').then(res => { // 赋值异步 this.myData = res.data; // 在下一个 tick 中执行回调函数 this.$nextTick(() => { console.log('myData 已更新'); }); }); }, immediate: true, }, }, ``` 在上面的例子中,当 `myData` 的值发生改变时,`handler` 回调函数会执行异步操作,并在异步操作完成后将新值赋值给 `myData`。然后,在下一个 tick 中,`$nextTick` 方法会执行回调函数并打印出 `'myData 已更新'`。这样就能确保赋值异步操作的正确性了。 ### 回答2: 在Vue中,watch选项是用来监听数据变化的,常用于对数据的变化做一些逻辑处理或者触发一些副作用操作。当我们在watch选项中赋值时,它的执行是异步的。 具体来说,当我们给watch选项赋值时,这个赋值操作会将要执行的回调函数添加到一个队列中,等到代码执行完毕之后再去执行这个队列中的回调函数。这样可以避免频繁的执行计算属性或者渲染组件,优化性能。 例如,我们有一个data属性名为count,同时有一个watch选项监听了count的变化: ``` data: { count: 0 }, watch: { count: function() { this.asyncFn(); } }, methods: { asyncFn: function() { setTimeout(function() { console.log(this.count); }, 1000); } } ``` 当我们修改count的值时,比如点击按钮来改变count的值,那么watch回调的执行会被推迟到下一个事件循环中,也就是说,在按钮的点击事件处理函数执行完之后,watch回调才会被执行。 这种异步的执行机制使得我们可以更好地控制代码的执行时机,避免了一些不必要的重复执行,提升了代码的性能。但同时也要注意,在异步的情况下,我们可能会遇到一些问题,比如依赖顺序的问题,这时我们可以使用Vue提供的nextTick方法来解决。 ### 回答3: 在vue中,watch属性是用于监听数据变化的。当数据变化时,watch会自动执行对应的响应函数。一般情况下,watch的赋值是同步的,也就是说,当数据改变时,watch会立即执行相应的函数。 然而,在某些情况下,我们可能会遇到watch赋值异步的情况。具体来说,当我们在watch中对数据进行赋值操作时,有时候这个赋值操作可能是异步的,也就是说,watch函数并不会立即执行,而是等待赋值操作完成后再执行。 为什么会出现watch赋值异步的情况呢?这主要是由于vue的响应式系统机制所致。在vue中,数据的变化会触发一系列的操作,包括触发getter和setter函数、重新渲染组件等。而这些操作是在vue的下一个事件循环中执行的,也就是说,赋值操作在当前的事件循环中并不会立即生效,而是需要等待下一个事件循环才能生效。 对于这种情况,我们可以采用一些方法来确保watch的赋值操作是同步的。例如,可以在watch函数中使用$nextTick方法来延迟执行异步操作,确保赋值操作生效。另外,也可以使用computed属性来替代watch属性,因为computed属性的赋值操作是同步的。 总之,虽然在某些情况下watch的赋值异步的,但我们可以通过一些手段来确保watch的赋值操作是同步的,以满足我们的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值