vue中mounted执行一个函数报错,但是该函数绑定到一个button的click事件上,手动点击button就可行

HongHaiyang
  • 104

一个vue组件,element-ui的tree组件,我想在tree组件生成的时候检测sessionStorage中是否有相应的数据,有的话就直接在tree组件上勾选上。

这是template部分:

<template>
    <div class="panel-wrapper collapse in" aria-expanded="true">
      <div class="panel-body">
        <!--:default-checked-keys="defCheckedKeys"-->
        <el-tree :data="trees" ref="tree" show-checkbox node-key="id"  :props="props"
                 @check-change="handleCheckChange" style="float: left;width: 70%;">
        </el-tree>
        <button type="button" class="mb-sm btn btn-success btn-outline booking-nodegroup-load" @click="treeinfo">load
        </button>
        <button type="button" class="mb-sm btn btn-success btn-outline booking-nodegroup-load" @click="nexttoexcuting">next
        </button>
        <button @click="getDefCheckedKeys">111</button>
      </div>
    </div>
</template>

这是script部分:

...
mounted:function(){
      this.getDefCheckedKeys()
    },
...
 //是否需要自动勾上节点
      getDefCheckedKeys(){
        //如果sessionStorage中存储有defCheckedKeys属性则根据属性值自动勾上tree组件
        if (sessionStorage.getItem('defCheckedKeys')) {
          console.log(JSON.parse(sessionStorage.getItem('defCheckedKeys')))
          this.$refs.tree.setCheckedKeys(JSON.parse(sessionStorage.getItem('defCheckedKeys')))
//          this.defCheckedKeys = JSON.parse(sessionStorage.getItem('defCheckedKeys'))

          console.log('getCheckedNodes:',this.$refs.tree.getCheckedNodes())
          this.treeinfo()
        }
      },
...

其中

console.log('getCheckedNodes:',this.$refs.tree.getCheckedNodes())

这是element-ui提供的获取已经勾选的tree节点的数据,我现在是mounted直接执行getDefCheckedKeys函数的话,网页上tree组件我设置的节点是已经自动勾上了,但是console.log('getCheckedNodes:',this.$refs.tree.getCheckedNodes())返回的是空数组,接着执行this.treeinfo()方法肯定也就报错了,这个方法中涉及到获取已经勾选的节点的信息;

我上面还有一个111的button,这个button的click事件绑定了getDefCheckedKeys方法,我手动去点击执行就万事ok,,,

请问是我mounted钩子用的不对吗?mounted在生命周期中太早了? 我这个组件是一个父组件的自组件

回复
阅读 3.9k
1 个回答
✓ 已被采纳
this.$nextTick(function () {
    this.getDefCheckedKeys()
})

这样试试

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏