简介
我在项目中使用了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
