Vue Router로 데이터 테이블 향상

Question

클릭하면 vue 경로로 이동하는 DataTable의 행에 링크/버튼을 추가하려고 합니다. 물론 간단하게 <a> 链接，其中包含 href="/item/${id}"만 추가할 수도 있습니다. 하지만 이렇게 하면 라우터를 우회하여 전체 페이지가 다시 로드됩니다

저는 두 가지 솔루션을 생각해 냈는데 둘 다 설정에 의존하여 onclick 일부 코드를 실행합니다.

1. route1中，我将一个名为vueRoute的函数附加到window对象，该函数只是对vue方法route1의 인용문. 이제 이 함수를 어디에서나 호출할 수 있습니다

2. route2에는 route2 中，我让 onclick 触发 CustomEvent，并且我设置了一个事件侦听器以由 route2 CustomEvent 트리거가 있고 route2 vue 메소드로 이를 처리하도록 이벤트 리스너를 설정했습니다

두 솔루션 모두 만족스럽지 않습니다. 작동하기는 하지만 "해키"해 보입니다. 어떻게 해야 합니까?

으아악

실제 예제는 여기에서 찾을 수 있습니다: https://stackblitz.com/edit/datatables-net-vue3-simple-mgdhf1?file=src/comComponents/ListView.vue

EDIT: 제가 실제로 한 일은 DataTables보다 Vue에서 더 잘 작동하는 헤드리스 테이블 구성 요소(TanStack)로 전환하는 것이었습니다. 하지만 DataTables를 사용해야 한다면 @Damzaky와 @Moritz Ringler가 아래에 게시한 솔루션이 제대로 작동할 것입니다

Answer 1

이것이 최선의 솔루션이라고는 말할 수 없지만 제가 아는 한 실제 "최고의" 솔루션은 없습니다. 데이터 테이블은 jQuery를 사용하고 여기서는 vue를 사용하고 있기 때문입니다(DOM 제어 친화적) 불일치) . 빠르게 검색한 결과 길을 찾지 못했습니다. 데이터 테이블의 render 속성 내에 vue 구성 요소를 렌더링합니다.

그래서 내 생각은 다릅니다. 렌더링 기능을 단순화 하고 drawCallback를 사용하여 이벤트 리스너를 추가하고 이벤트 대리자를 사용하여 리스너를 연결합니다.

문서에서:

으아악

그래서 각 링크에 data-item-id를 추가한 다음 상위의 클릭 이벤트를 사용하여 라우터 푸시(이벤트 위임)를 수행합니다. 나는 이것이 최선의 대답이 아니라는 것을 알고 있지만 아마도 이것이 당신을 위한 또 다른 선택이 될 수 있습니다.

이 는 포크된 샌드박스입니다. 관심이 있으시다면.

Answer 2

DataTable 개체에 @click 처리기를 설정할 수 있습니다.

으아악

이벤트는 일반 클릭 이벤트이므로 인식 가능한 ID 데이터 세트 속성이 필요합니다.

으아악

클릭 핸들러는 ID를 검색할 수 있는지 확인하고 클릭이 링크에서 발생했는지 확인하기만 하면 됩니다.

으아악

업데이트된 Stack Blitz

는 다음과 같습니다.

---

흥미롭게도 배경과 마찬가지로 문제는 Vue와 jQuery 간의 연결이 아니라 DataTables가 작동하는 방식입니다. 특히 셀 클릭이나 행 클릭에 대한 이벤트가 없으며 렌더러는 HTML 문자열만 반환할 수 있습니다.

놀랍지 않습니다. jQuery가 작동하는 방식은 데이터, 뷰 및 동작이 본질적으로 연결되어 있지 않지만 적절하다고 생각하는 대로 연결할 수 있다는 것입니다. 따라서 jQuery에서는 직접 작성하거나 존재하지 않기 때문에 활용할 수 있는 셀 클릭 이벤트가 없습니다.

jQuery에서 핸들러를 설정하는 가장 효율적인 방법은 대상 필터를 사용하여 테이블에 이벤트를 설정하는 것입니다.

으아악

장점은 다음과 같습니다.

• 모든 행에 대해 하나의 이벤트만 발생합니다
• 페이지를 변경하거나 다시 렌더링할 때 이벤트를 추가할 필요가 없습니다
• 렌더링 기능의 코드는 최소한으로 유지됩니다

위의 Vue 솔루션은 jQuery 없이도 똑같은 작업을 수행합니다.

그래서 이것이 코드 크기(유지관리성)와 성능 측면 모두에서 Vue에서 작동하도록 하는 가장 효율적인 방법이라고 생각합니다.

DataTable에서는 jQuery가 전역적으로 액세스 가능해야 하므로 Vue 구성 요소에서도 사용할 수 있으며 콜백에서 Vue 라우터에 액세스할 수 있는 mounted 후크에 지정된 jQuery 문을 넣을 수 있습니다. 따라서 jQuery 측에서 사용하기 위해 라우터를 전역 범위에 두는 대신 Vue 측에 이미 존재하는 객체를 사용할 수 있습니다.
그래도 Vue 코드에 jQuery를 혼합할 필요가 없으므로 이를 피하고 위의 Vue 전용 솔루션을 사용하겠습니다.