vue组件渲染失败

Question

问题：我编写了一个chart组件，在父组件中渲染不出来，但是，在热加载中修改文件后，就渲染出来了，刷新后有没有了，浏览器console没有报任何错误，并且html已经渲染出来component的html元素了，下面是我的代码：

chart组件代码

调用代码

html渲染代码，数据渲染失败

但是在子组件中使用静态数据，渲染是成功的。

补充：

后来调试发现：在created函数中，通过异步获取数据，然而传进子组件中的数据为空，是data中的初始值

希望遇到过相关问题的人提供些解决思路，谢谢！

Answer 1

mounted: function () {
  this.$nextTick(function () {
   //echarts相关代码
  })
}

Answer 2

你直接用了props传过来的值，而这些值在组件初始化的时候为空（因为props的值可能是接口调用时返回的数据），所以页面渲染出来也是空的！
也就是说在你mounted里，初始化echarts的时候，xdata和ydata的值可能是空！

解决方案：
1、通过watch
2、computed
3、在父组件中对当前组件使用v-if判断，当有值的时候才渲染当前组件
....