前端dom渲染和数据加载出错

前端dom渲染和数据加载出错

出错描述：第一次点击明细按钮后，报错TypeError: Cannot read property ‘loadData’ of undefined，数据未加载出来；第二次点击按钮后，数据可以加载出来。

错误分析：弹出框visible初始为false，相当于v-if=“false”。当点击按钮后，弹出框的dom渲染是异步的，还未渲染完成就执行数据加载，而this.$refs.detailGridPage就是获取指定的dom对象，此时dom对象都还未渲染完成，调用方法自然报错。

解决办法：this.$nextTick方法相当于延时函数，等待dom渲染完成之后加载数据。

this.$nextTick(() => {
  this.$refs.detailGridPage.loadData()
})

前端小白，如有错误，望指正，不胜感激！