vue3에서 객체 값 변경 시 페이지네이션 재렌더링이 안됨

Question

백엔드에서 감싼 Open API를 사용하여 데이터 배열을 가져옵니다.데이터를 가져오면서 데이터 총 갯수와 페이지당 게시물 수(기본10), 페이징번호(기본 1)를 객체에 업데이트합니다.페이징은 페이지네이션을 누르면 해당하는 페이지값을 페이징 번호에 넘겨서 새로 데이터리스트를 불러옵니다.그런데 이때 다른 키워드로 재검색을 하면데이터 총갯수, 페이지당 게시물수, 페이징 번호가 담긴 객체에 값은 업데이트가 되는데페이지네이션 버튼 수가 갱신이 안되고 이전 갯수가 유지됩니다.현재 vue-pagination-tw 라는 라이브러리를 사용하고 있습니다.제가 알기로는 ref나 reactive를 사용한 객체는 그 내부 값이 변경되었을 때 재렌더링이 일어난다고 이해하고 있습니다.그런데, 페이지네이션 버튼은 갯수가 맞게 렌더링 되지 않는데, 해당 컴포넌트에 포함된 버튼 하단에 현재페이지 - 총 게시물 수 숫자 표시는 제대로 업데이트 되는 것을 보고 왜 이런지 의문이 생겼습니다.

하태연 · Accepted Answer

혹시 라이브러리가 이 링크 맞나요? https://www.npmjs.com/package/vue-pagination-tw맞다면, 제가 Demo 페이지에서 이것저것 테스트를 해보는데.. 페이징 영역이 반응형 적용이 안 되는 것 같습니다. 이벤트가 페이지가 변경될 때만 받게 되어 있네요. 아무래도 임시방편으로 지금 처럼 어쩔 수 없이 재 렌더링 하시던지 다른 라이브러리를 사용하셔야 할 것 같습니다. 저는 당연히 이런 게 되어 있다고 생각했는데 안일했습니다.제가 최근에 업데이트 된 걸로 라이브러리 하나 잡고 해봤는데 잘 되네요. 'vue-awesome-paginate'란 라이브러리입니다.

개발자가아닌조립자 · Answer

watch 써보시죠

Praenomen · Answer

vue-pagination-tw은 잘 모르겠으나코드 한줄로 여러 반복문을 돌리는 것인가.. 하고 의심됩니다.v-if와 v-for는 함께 사용하는 것을 권장하지 않는데 그런 연유가 아닌가 추측해봅니다.https://v3-docs.vuejs-korea.org/guide/essentials/conditional.htmldocs입니다.

하태연 · Answer

reactive 객체를 props로 넘기시면 반응성이 깨질 수 있습니다. 속성값 넘기실 때 pagination.totalCount 처럼 넘기지 마시고 computed로 한번 감싸서 넘겨주시면 될 거예요.const paginationComputed &#61; computed(() &#61;> pagination)이러면 props에 paginationComputed.totalCount라고 넘겨주면 될 것 같습니다.

vue3에서 객체 값 변경 시 페이지네이션 재렌더링이 안됨

4개의 답변

#pagination 목록