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