vue中集成jsplumb报错`Cannot read property ‘parentNode‘ of null`，且无法渲染连线的问题

简介

我在项目中使用了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渲染端