Vue Draggable 不能与 filterBy 一起使用？

Posted 2023-02-23

【中文标题】Vue Draggable 不能与 filterBy 一起使用？

【英文标题】：Vue Draggable not working with filterBy?

【发布时间】：2017-08-08 07:07:20

【问题描述】：

我正在使用 vue 可拖动组件将对象从一个 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" >  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" >  name 
    </div>
</draggable>

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

有什么想法吗？

【参考方案1】：

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

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

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

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

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

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

【讨论】：

当我将相同的列表传递给可拖动组件时它停止工作..

【参考方案2】：

我基本上同意@LinusBorg，但有一些细微差别：

1) 可拖动列表道具和 v-for 必须使用集合

2) 为过滤后的数组创建一个不同的数组。计算属性将无法工作，因为可拖动将尝试更改它。如果主数组可能发生变化，您可以使用数据字段并使用监视。

3) 监听更改事件以在主阵列上传播更改。

【参考方案3】：

我认为这是因为 SortableJS 使用索引来获取当前拖动的元素。

// Sortable.js:341
// Get the index of the dragged element within its parent
startIndex = _index(target, options.draggable);

我有一个类似的案例： 几组拖放组应该共享相同的项目列表，并且项目不能跨组重复。

我想我最终会手动添加/删除元素。

【讨论】：

因此它不适用于具有多个“视图”的主列表，您可以在这些主列表之间拖放。这符合我的经验。事件在 same 数组中使用“索引”，但代码“认为”它们是不同的数组。 => 他们假设有多个单独的灯。除了将主数组拆分为单独的数组之外，我在这里看不到任何解决方案。我会试试的。