v-data-table 끌어서 놓기 설정

v-data-table 끌어서 놓기 설정

나는 V-data-table과 vuex store를 함께 사용하고 있다.다음은 v-data-table을 구성하는 방법

1. 각 열에서 정렬 사용 안 함
2. v-data-table 항목을 vuex 상태 저장 데이터와 바인딩
3. 정렬 가능한 j를 사용하여 행을 끌어서 놓기

문제:v-data-table에서 행을 드래그 앤 드롭하면 vuex 저장소를 업데이트하는 것이다(배열에 있는 개체의 인덱스 값을 테이블 행 인덱스 값으로 업데이트).Vuex가 올바르게 업데이트되고 있지만 v-data-table에 렌더링된 데이터가 Vuex 상태 저장소에 있기 때문에 순서가 잘못됨

이 일에 누가 좀 도와줄 수 있을까?

이 문제를 극복하기 위해 노력한 가장 좋은 방법은 v-data-table 구성 요소를 강제로 재렌더하는 것이지만, 이렇게 하면 더 이상 드래그 앤 드롭할 수 없다.

다음 템플리트를 사용하여 강제 렌더링

<template>
  <component-to-re-render :key="componentKey" />
</template>
// script
export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
}

이것이 최적의 해결책은 아닐지 모르지만, 나는 그냥 일반 어레이를 사용하고 있었다는 것 외에는 비슷한 문제가 있었다.업데이트() 라이프사이클 후크에 있는 Sortable.create() 메서드를 불러 가까스로 고쳤다.

내 추측으로는 Sortable.create(테이블, ...)를 부를 때 테이블 요소의 해당 인스턴스를 가리키는 것 같다.그러나 키를 수정하여 테이블을 변경하려고 하면 해당 인스턴스가 변경된다.따라서 vue 구성 요소가 업데이트될 때마다 Sortable.create()를 다시 호출해야 한다.

참조URL: https://stackoverflow.com/questions/56960118/vuetify-v-data-table-drag-and-drop