简介
我在项目中使用了typescript+vue+jsplumb作为流程图框架。
问题
我在容器中使用的是v-for指令渲染。
- 从配置文件中读取流程图的json并且存入
this.items
变量中 - 通过v-for指令,调用
this.item
,渲染一系列组件作为流程图的节点。 - 在
this.paintFlowchart
方法中进行端口Endpoint
和连线Connector
的添加。
代码:
mounted(){
this.items = JSON.parse(JSON.stringify(demoGraph));
this.paintFlowchart();
}
编译运行,控制台报错TypeError: Cannot read properties of null (reading 'parentNode')
。同时,在前端网页中,只有节点、不见连线(Connector)和端口(Endpoint)。挠头很久百思不得解。最后查阅了Vue的属性,终于得到了答案。
解决
添加一句this.$nextTick()
,即可解决问题。
这里的nextTick的作用是,this.items已经被更新,可是DOM还没有发生更新。
jsplumb是通过访问dom来添加节点上的端口和连线的。如果不用nextTick,当调用绘制函数的时候,流程图的节点还没有被渲染上去。由此,如果直接调用this.paintFlowcharth渲染端口Endpoints
时,就找不到节点parentNode
,于是就会报这个错误。
mounted(){
this.items = JSON.parse(JSON.stringify(demoGraph));
this.$nextTick(()=>{
this.paintFlowchart();
});
}
如果要向后端请求数据,可以写成:
mounted(){
// http为axios的实例
http.get("/flowchart").then((resp)=>{
this.item = resp.data
this.$nextTick(()=>{
this.paintFlowchart();
});
}) // 异常处理略
}
其他问题
当有多个流程图实例的时候,一定要保证各个节点的id都是唯一的,即便它们处于不同的流程图。
类似问题收集:
jsplumb与vue集成,应当在mounted中调用初始化-relong00
误用created钩子导致无法报错 [这里是代码013]-秉寒-CHO
在mounted之前调用[这里是代码014]导致无法显示连线-铛铛铛铛Huan
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)