Vue Draggable不能使用filterBy？

我使用vue可拖动组件将对象从一个div拖放到另一个div。我也使用filterBy筛选v-model。问题是当我过滤（例如得到1结果）并尝试拖放项目时，首先从所有项目中删除，而不是拖动项目。Vue Draggable不能使用filterBy？

从拖动：

<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>

在它自己的这两项功能都工作正常。但是，在过滤结果时，它会更改元素的索引，并且在从一个列表移动到另一个列表时 - 移动另一个项目，而不是拖动该项目。

任何想法？

来源

2017-03-16 Simeon Stoyanov

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

您目前使用一种方法来执行过滤操作。您将不必调用此方法两次以获得相同的结果。

您应该改用计算属性来避免两次执行相同的操作。

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

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

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

来源

2017-03-16 21:56:19

当我通过相同的列表拖动组件它停止工作.. –

看到我上面的编辑... –

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

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

我也有类似的情况：几套拖放群体应该分享相同的项列表，项目不能跨组重复。

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

来源

2017-06-12 22:50:50 victorpolko

因此，它不会在一个主控列表上工作与多个“视图”你拖放之间。这符合我的经验。事件使用“索引”到*相同*数组中，但代码“认为”它们是不同的数组。 =>他们假设多个单独的lits。除了将主数组拆分为单独的数组之外，我在这里看不到任何解决方案。我会尝试的。 – philw

主要是我同意@LinusBorg，有一些细微的差别：

1）拖动列表的道具和v-对于必须使用收集

2）创建过滤的阵列不同的阵列。计算属性不能像可拖动的那样工作会尝试改变它。如果主阵列可能发生更改，则可以使用数据字段并使用watch。

3）监听更改事件以传播主阵列上的更改。

来源

2017-07-12 20:28:57

Vue Draggable不能使用filterBy？

回答

相关问题