Vue DraggableがfilterByで動作していませんか？

Question

vueドラッグ可能なコンポーネントを使用して、あるdivから別のdivにオブジェクトをドラッグアンドドロップしています。私もv-modelをフィルタリングしてfilterByを使用しています。問題は、フィルタリングして（たとえば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に使用するドラッグ可能なコンポーネントに同じリストを渡す必要があります。どちらもフィルタリングされた結果が必要です。

現在、フィルター操作を行う方法を使用しています。両方の場所で同じ結果を得るには、このメソッドを2回呼び出す必要はありません。

代わりに計算されたプロパティを使用して、同じ操作を2回繰り返さないようにする必要があります。

編集：ドラッグ可能なコンポーネントは、指定されたリストを変更します。計算されたプロパティを使用すると、ソースデータには影響しません。

vue-draggableのドキュメントを確認した後、おそらくコンポーネント（https://github.com/SortableJS/Vue.Draggable#events）が提供するイベントchangeを使用してソースデータを更新する必要があります。

フィルタリングされていないソースリスト内の移動した要素の新しい位置を判断するロジックがわからないため、具体的な例はありません。

Answer 2

SortableJSが現在ドラッグされている要素を取得するためにインデックスを使用しているため、これが起こっていると思います。アイテムの同じリストを共有する必要がありますドラッグ＆ドロップグループの いくつかのセット、およびアイテムはセット間で繰り返すことはできません。

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

私は似たようなケースがあります。

要素を手動で追加/削除することになります。

1）ドラッグ可能なリストの小道具をとvのためのフィルタアレイの異なる配列を作成し、コレクション

2）を使用する必要があります。

Answer 3

は、主に私はいくつかのマイナーな違いは、@LinusBorgに同意します。 draggableはそれを変更しようとすると計算されたプロパティは動作しません。マスター配列が変更される可能性がある場合は、データフィールドを使用してウォッチを使用できます。

3）マスターアレイの変更を反映するために、変更イベントを待ち受けます。