Vue.js 在jsplumb节点中添加锚

我正在使用vue和jsplumb构建一个图形

样本数据为

var data_A = {
    name: '流程A',
    description: '流程A',
    created: '2019-04-19 12:14:39',
    status:'active',
    nodes: [
        {
            id: 'nodeA',
            name: '流程A-节点A',
            type: 'task',
            left: '26px',
            top: '161px',
            ico: 'el-icon-user-solid'
        },
        {
            id: 'nodeB',
            name: '流程A-节点B',
            type: 'task',
            left: '340px',
            top: '161px',
            ico: 'el-icon-goods'
        },
        {
            id: 'nodeC',
            name: '流程A-节点C',
            type: 'task',
            left: '739px',
            top: '161px',
            ico: 'el-icon-present'
        }
    ],
    edges: [{
        from: 'nodeA',
        to: 'nodeB'
    }, {
        from: 'nodeB',
        to: 'nodeC'
    }]
}

显示图形的代码显示为

    loadEasyFlow() {
        for (var i = 0; i < this.data.nodes.length; i++) {
            let node = this.data.nodes[i];
            this.jsPlumb.makeSource(node.id, lodash.merge(this.jsplumbSourceOptions, {}))
            this.jsPlumb.makeTarget(node.id, this.jsplumbTargetOptions)
            if (!node.viewOnly) {
                this.jsPlumb.draggable(node.id, {
                    containment: 'parent',
                    stop: function (el) {
                    }
                })
            }
        }
        for (var i = 0; i < this.data.edges.length; i++) {
            let line = this.data.edges[i]
            var connParam = {
                source: line.from,
                target: line.to,
                label: line.label ? line.label : '',
                connector: line.connector ? line.connector : '',
                anchors: line.anchors ? line.anchors : undefined,
                paintStyle: line.paintStyle ? line.paintStyle : undefined,
            }
            this.jsPlumb.connect(connParam, this.jsplumbConnectOptions)
        }

        this.$nextTick(function () {
            this.loadEasyFlowFinish = true
        })
    }

loadEasyFlow（）{
for（var i=0；i

这可以作为

然后我想在节点周围添加更多锚点

我在代码末尾添加了以下代码

var anchorPointsTop = ["Top", "TopLeft", "TopRight", "Right", "Left"];
var targetColor = "#aa1100";
var targetEndpoint = {
    anchors: anchorPointsTop, //Placement of Dot
    endpoint: ["Dot", { radius: 4}], //Other types are rectangle, Image, Blank, Triangle
    paintStyle: { fillStyle: targetColor }, //Line color
    isSource: true, //Starting point of the connector
    scope: "red dot",
    connectorStyle: { strokeStyle: targetColor, lineWidth: 4}, // Means Bridge width and bridge color
    connector: ["Flowchart"], //Other properties Bezier
    maxConnections: -1, //No upper limit
    isTarget: true, //Means same color is allowed to accept the connection
    //dragOptions: targetDragOptions, //Means when the drag is started, other terminals will start to highlight
};
//Setting up a Source endPoint
var sourceColor = "#0800A8";
var anchorPoints = ["Bottom", "BottomLeft", "BottomRight", "Right", "Left"];
var sourceEndpoint = {
    anchors: anchorPoints,
    endpoint: ["Dot", { radius: 4}],
    paintStyle: { fillStyle: sourceColor },
    isSource: true,
    scope: "red dot",
    connectorStyle: { strokeStyle: sourceColor, lineWidth: 4 },
    connector: ["Flowchart"],
    maxConnections: -1,
    isTarget: true,
};

for (var i = 0; i < this.data.nodes.length; i++) {
  let node = this.data.nodes[i];
  console.log('.....',node.id);
  this.jsPlumb.addEndpoint($("#"+node.id), targetEndpoint);
  this.jsPlumb.addEndpoint($("#"+node.id), sourceEndpoint);
}

var anchorPointsTop=[“顶部”、“顶部左侧”、“顶部右侧”、“右侧”、“左侧”]；
var targetColor=“#aa1100”；
变量targetEndpoint={
锚点：锚点停止，//点的放置
端点：[“点”，{radius:4}]，//其他类型有矩形、图像、空白、三角形
paintStyle:{fillStyle:targetColor}，//线条颜色
isSource:true，//连接器的起点
经营范围：“红点”，
connectorStyle:{strokeStyle:targetColor，线宽：4}，//表示桥宽和桥色
连接器：[“流程图”]，//其他属性Bezier
maxConnections:-1，//无上限
isTarget:true，//表示允许相同颜色接受连接
//dragOptions:targetDragOptions，//表示开始拖动时，其他终端将开始高亮显示
};
//设置源终结点
var sourceColor=“#0800A8”；
var主播点=[“底部”、“底部左侧”、“底部右侧”、“右侧”、“左侧”]；
var sourceEndpoint={
主播：主播点，
端点：[“点”{radius:4}]，
paintStyle:{fillStyle:sourceColor}，
来源：是的，
经营范围：“红点”，
连接器样式：{strokeStyle:sourceColor，线宽：4}，
连接器：[“流程图”]，
maxConnections:-1，
isTarget:没错，
};
for（var i=0；i

但结果是图形仍然没有锚显示在节点中

有什么想法吗