Vue Draggable이 filterBy에서 작동하지 않습니까?

Question

하나의 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에 사용하는 드래그 가능한 구성 요소에 동일한 목록을 전달해야합니다. 필터링 된 결과가 필요합니다.

현재 필터 작업을 수행하는 방법을 사용하고 있습니다. 이 메소드를 두 번 호출하여 동일한 결과를 두 곳으로 가져 오지 않아야합니다.

계산 된 속성을 사용하여 같은 작업을 두 번 반복하지 않아야합니다.

편집 : 드래그 가능한 구성 요소가 제공된 목록을 변경하므로 계산 된 속성을 사용할 때 원본 데이터에 영향을주지 않습니다.

vue-draggable에 대한 문서를 살펴본 후 구성 요소 (https://github.com/SortableJS/Vue.Draggable#events)가 제공 한 change 이벤트를 사용하여 원본 데이터를 업데이트해야합니다.

필자는 필터링되지 않은 소스 목록에서 이동 된 요소의 새 위치를 결정하는 논리가 무엇인지 모르기 때문에 구체적인 예를 제공 할 수 없습니다.

Answer 2

SortableJS가 색인을 사용하여 현재 드래그 된 요소를 가져 오는 이유는 그렇게 생각합니다. 동일한 항목 목록을 공유해야 drag'n'drop 그룹의 여러 세트 및 항목 세트를 통해 반복 할 수 없습니다 :

// 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) 변경 이벤트를 수신하여 마스터 배열의 변경 내용을 전파하십시오.