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？

回答

相關問題