vue.js中运用jsPlumb遇到的坑

jsplumb是操做dom进行运行的，必需要等dom所有加载完以后在进行渲染jsPlumb。

能够写在vue的this.$nextTick方法里（以前用定时器，会莫名出现bug）;

mounted(){
    this.$nextTick(() => {
        plumbIns.ready(function () {
            //defaultConfig  一些公共配置json
            let relations = [
                ['scriptStart', 'addScriptStep'],
                ['addScriptStep', 'scriptEnd'],
            ];
            for (let item of relations) {
              plumbIns.connect({
                 source: item[0],
                 target: item[1]
              }, defaultConfig)
            }
        })
    }
}

流程图更新时，会从新获取dom的id，可是vue数据更新时会复用，也会出现一些莫名问题，因此使用v-for进行数据渲染时，要给每组数据加一个key，key最好不要用index。

<Button v-for="item in allStep" :id="'step' + item.scriptStepId" class="chartBtn"  :key="item.scriptStepId" ><span>{{item.scriptStep}}</span></Button>

 最好用每条数据的惟一做为key。

当数据改变时，流程图也要跟着改变，因此要清除以前的链接线（在这里用了好长时间）：

在画流程时，先加上reset()方法，进行清除。

let plumbIns = jsPlumb.getInstance();
plumbIns.reset();