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