javascript - Vue Draggable 不能与 filterBy 一起使用？

Question

我正在使用 vue 可拖动组件将对象从一个 div 拖放到另一个 div。我还使用 filterBy 过滤 v-model。问题是当我过滤(例如得到 1 个结果)并尝试拖放所有项目中的第一个项目而不是拖动的项目时。

拖拽自:

<draggable :list="available" class="draggable" :options=" group:'stuff'}">
   <div v-for="people in filterBy(available, filter_available, 'name')" class="list-item">
      <img :src="image" height="20"> {{ name }}
   </div>
</draggable>

掉落到:

<draggable :list="drop" class="draggable" :options="{group:'stuff'}">
    <div v-for="people in filterBy(drop, filter_doppred, 'name')" class="list-item">
       <img :src=image" height="20"> {{ name }}
    </div>
</draggable>

就其本身而言，这两个功能都运行良好。但是，在过滤结果时，它会更改元素的索引，并且在从一个列表移动到另一个列表时 - 我移动的是不同的项目，而不是拖动的项目。

有什么想法吗？

Answer 1

好吧，您必须将相同的列表传递给用于 v-for 的可拖动组件 - 两者都需要过滤后的结果。

您当前使用一种方法进行过滤操作。您不必两次调用此方法来在两个地方获得相同的结果。

您应该使用计算属性来避免重复执行相同的操作。

编辑:可拖动组件会改变提供的列表，这不会在您使用计算属性时影响您的源数据。

在查看了 vue-draggable 的文档之后，您可能应该使用组件 (https://github.com/SortableJS/Vue.Draggable#events) 提供的 change 事件来更新您的源数据。

我不能给你一个具体的例子，因为我不知道你的逻辑是什么来确定未过滤的源列表中移动元素的新位置。