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

Question

一个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在生命周期中太早了？ 我这个组件是一个父组件的自组件

Answer 1

this.$nextTick(function () {
    this.getDefCheckedKeys()
})

这样试试