0

С помощью Vue из объекта циклом выводятся на экран блоки. Простите за длинный пример, но не знаю, как еще упростить, чтобы воспроизвести проблему.

var blocks1 = [{
    id: "b1",
    pos: [20, 100],
    routes: [{
      id: "r1",
      target: "b2"
    }, {
      id: "r2",
      target: "b3"
    }]
  },
  {
    id: "b2",
    pos: [130, 50]
  },
  {
    id: "b3",
    pos: [130, 150]
  }
];

var blocks2 = [{
    id: "b4",
    pos: [25, 110]
  },
  {
    id: "b5",
    pos: [120, 60],
    routes: [{
      id: "r3",
      target: "b4"
    }, {
      id: "r4",
      target: "b6"
    }]
  },

  {
    id: "b6",
    pos: [135, 140]
  }
];

var jsp = jsPlumb.getInstance({
  Container: "jsp",
  Anchors: ["Right", "Left"]
});

var app = new Vue({
  el: "#app",
  data: {
    blocks: blocks1
  },
  mounted: function() {
    console.clear();
    console.log("vue mounted");
    drawLines();
    makeDraggable();
  },
  updated: function() {
    console.log("vue changed");
    drawLines(); //рисуем связи заново
    //makeDraggable(); почему работает без этого?
  },
  methods: {
    changeData: function() {
      jsp.reset(); //сбрасываем jsplumb
      this.blocks = blocks2; //меняем данные
    }
  }
});

function makeDraggable() {
  let blocks = document.querySelectorAll(".block");
  for (var block of blocks) {
    jsp.draggable(block.id);
  }
}

function drawLines() { //перебираем маршруты
  let routes = document.querySelectorAll(".route");
  for (var route of routes) {
    drawLine(route);
  }
}

function drawLine(route) { //рисуем связь
  jsp.connect({
    source: route.id,
    target: route.dataset.target
  });
}
.block {
  position: absolute;
  padding: 1rem;
  background-color: #eee;
}

.jtk-endpoint {
  display: none;
}
<div id="jsp">
  <div id="app">
    <button @click="changeData">change data</button>
    <div class="block" v-for="block in blocks" :id="block.id" :style="{top:block.pos[1]+'px', left:block.pos[0]+'px'}">
      <div class="title">{{block.id}}</div>
      <div class="routes">
        <div class="route" v-for="route in block.routes" :data-target="route.target" :id="route.id">
          {{route.target}}
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.11.2/js/jsplumb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

Есть jsPlumb, который после отрисовки DOM в хуке mounted() делает эти блоки перетаскиваемыми и рисует между ними связи. Пока все хорошо, все работает.

Теперь я хочу загрузить другую схему блоков и меняю объект. Я сбрасываю jsPlumb методом reset(), Vue перерисовывает новые блоки, jsPlumb заново рисует связи, но, при перетаскивании блока b5 с исходящими связями все ломается.

Выдает в логе:

jsPlumb function failed : TypeError: Cannot read property 'el' of undefined

Как это исправить?

И еще вопрос, почему заново нарисованные блоки становятся перетаскиваемыми? Такое ощущение, что Vue не стирает их полностью, а меняет содержимое у такого же количества блоков, оставляя эвенты.

UPD: да, так и есть, vue просто меняет id и содержимое блоков, вместо того, чтобы удалить их из dom и создать заново. Как изменить это поведение?

Полный пример на codepen

1 ответ 1

0

Разобрался сам. Vue действительно не перерисовывает блоки полностью. Поэтому на них остаются эвенты и классы от jsPlumb. Чтобы заставить Vue полностью перерисовывать блоки нужно ему сказать, что они разные, добавив атрибут key явно.

<div v-for="(block,index,key) in blocks" :key="block.id" ... >

Значения должны быть уникальными, например id, тогда Vue поймет, что это разные блоки.

var blocks1 = [{
    id: "b1",
    pos: [20, 100],
    routes: [{
      id: "r1",
      target: "b2"
    }, {
      id: "r2",
      target: "b3"
    }]
  },
  {
    id: "b2",
    pos: [130, 50]
  },
  {
    id: "b3",
    pos: [130, 150]
  }
];

var blocks2 = [{
    id: "b4",
    pos: [25, 110]
  },
  {
    id: "b5",
    pos: [120, 60],
    routes: [{
      id: "r3",
      target: "b4"
    }, {
      id: "r4",
      target: "b6"
    }]
  },

  {
    id: "b6",
    pos: [135, 140]
  }
];

var jsp = jsPlumb.getInstance({
  Container: "jsp",
  Anchors: ["Right", "Left"]
});

var app = new Vue({
  el: "#app",
  data: {
    blocks: blocks1
  },
  mounted: function() {
    console.clear();
    console.log("vue mounted");
    drawLines();
    makeDraggable();
  },
  updated: function() {
    console.log("vue changed");
    drawLines(); //рисуем связи заново
    makeDraggable(); //возвращаем перетаскивание
  },
  methods: {
    changeData: function() {
      jsp.reset(); //сбрасываем jsplumb
      this.blocks = this.blocks==blocks1 ? blocks2 : blocks1; //меняем данные
    }
  }
});

function makeDraggable() {
  let blocks = document.querySelectorAll(".block");
  for (var block of blocks) {
    jsp.draggable(block.id);
  }
}

function drawLines() { //перебираем маршруты
  let routes = document.querySelectorAll(".route");
  for (var route of routes) {
    drawLine(route);
  }
}

function drawLine(route) { //рисуем связь
  jsp.connect({
    source: route.id,
    target: route.dataset.target
  });
}
.block {
  position: absolute;
  padding: 1rem;
  background-color: #eee;
}

.jtk-endpoint {
  display: none;
}
<div id="jsp">
  <div id="app">
    <button @click="changeData">change data</button>
    <div class="block" v-for="(block,index,key) in blocks" :key="block.id" :id="block.id" :style="{top:block.pos[1]+'px', left:block.pos[0]+'px'}">
      <div class="title">{{block.id}}</div>
      <div class="routes">
        <div class="route" v-for="route in block.routes" :data-target="route.target" :id="route.id">
          {{route.target}}
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.11.2/js/jsplumb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.