Question

我正在使用Pivotal Tracker的API制作看板，并使用Vue 2进行构建。我最初使用jQuery和jQuery UI构建了这个应用程序，但现在我正在用Vue 2重建应用程序，并认为Vue Draggable似乎是一个很好的选择，用于拖放。

在我的应用程序中，当我将故事卡放入某个类别时，我需要知道我放弃了哪个类别，因此我可以向Pivotal Tracker发送更新。我的故事卡在我的Vue数据对象中存储为数组，如下图所示： Vue data object（待办事项，积压，inProgress，readyForReview或数据）

目前，我发现了一个关于使用Vue Draggable的:move事件访问正确类别的方法。 ```

<template>
  <div class="board">
    <p class="heading">{{text}}</p>
    <draggable :list="stories" class="draggable-list" :move="checkMove" :options="{group:'cards'}">
      <story-card v-for="(item, index) in stories" :story="item" :key="index"></story-card>
    </draggable>
  </div>
</template>

```

  methods: {
    checkMove (evt) {
      switch (evt.relatedContext.component._uid) {
        case 3:
          (evt.dragged._underlying_vm_.current_state = 'unstarted');
          break;
        case 5:
          (evt.dragged._underlying_vm_.current_state = 'unscheduled');
          break;
        case 7:
          (evt.dragged._underlying_vm_.current_state = 'started');
          break;
        case 9:
          (evt.dragged._underlying_vm_.current_state = 'finished');
          break;
        case 11:
          (evt.dragged._underlying_vm_.current_state = 'accepted');
          break;
      }
    }
  },

经过一段时间的挖掘后，我发现evt.relatedContext.component._uid为每个数组返回一个唯一的id，但解决方案非常脆弱，因为每次进行更改并保存代码时都会分配新的ID。我的印象是，应该避免以下划线开头的这些属性，因为它们是Vue的内部属性，我不能依赖它们保持不变。

阅读Vue Draggable文档后的明显解决方案是使用@end和evt.to，但目前存在一个错误，其中evt.from和evt.to都指向原始元素。（Link to issue）我需要获取我正在删除的元素，或者至少将哪个数组推送到在drop上添加故事卡的位置。任何帮助指出我的方向是一个不那么复杂，更可靠的解决方案将非常感谢!!

Vue Draggable - 访问您要删除的元素

0 个答案: