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();