vue3 sortable 사용 시 위치에 따른 index값 변경

Question

안녕하세요!vue3 composition-api로 현재 프론트 개발 진행중입니다.현재 상황은.. jquery기반 sortable 라이브러리를 사용해서 div의 리스트를 드래그해서 이동시킬 수 있는 기능 떄문에 문제가 생겼습니다.개발은 vue로 하는데 디자인은 jquery 기반으로 전달 받았기 떄문에 이런 상황이 생기기도 합니다.제가 원하는 것은 리스트가 3개인데 sortable를 이용하면 1 2 3 의 리스트가 2 1 3 이든 3 2 1 이든 이동이 가능한데이동이 되었을 때 list가 갱신(?) 되어서 리스트가 새로 만들어지는 것을 원합니다.간단하게 1 2 3 의 3개의 리스트 요소가 3 1 2 로 이동이 되었으면 3 번째 리스트가 1번 요소로 변경이 되는 식입니다.{id:1, name:test1} { id:3, name:test3}{id:2, name:test2} ->. {id:1, name:test1}{id:3, name:test3} {id:2, name:test2}이럴 때 최종 리스트는{id:1, name:test3}{id:2, name:test1}{id:3, name:test2}이렇게 하고 싶은데방법이 있을까요?

Clickin · Answer

list를 다시 sort해서 재할당하면 vue가 dom을 다시 그려줄겁니다.ref로 정의하신건지 reactive로 정의하신건지는 모르겠는데 그냥 변경된 id로 다시 정렬하고 재할당하시면 됩니다.ref면 value를 수정하시고 reactive면 Object.assign으로 할당하시면 됩니다.

vue3 sortable 사용 시 위치에 따른 index값 변경

1개의 답변

Q&A 목록