computed를 watch 하도록 재시도

yhlee002 · Jul 18, 2024 · 778d1fc · 778d1fc
1 parent 8bec164
commit 778d1fc
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 32 deletions.
diff --git a/src/components/board/BoardComponent.vue b/src/components/board/BoardComponent.vue
@@ -22,13 +22,13 @@ const pageNum = computed(() => {
   console.log('반환될 값', isNaN(nanable) ? 1 : nanable);
   return isNaN(nanable) ? 1 : nanable;
 });
-// boardStore.currentPage = pageNum.value;
+boardStore.currentPage = pageNum.value;
 
-if (props.page) {
-  boardStore.currentPage = Number(props.page);
-} else {
-  boardStore.currentPage = 1;
-}
+// if (props.page) {
+//   boardStore.currentPage = Number(props.page);
+// } else {
+//   boardStore.currentPage = 1;
+// }
 
 await boardStore.getBoards(boardStore.currentPage, 10, null, null, orderBy.value);
 await boardStore.getWeeklyRecommendedTopBoards(5);
@@ -45,31 +45,31 @@ watch(orderBy, async (newVal, oldVal) => {
   renderCnt.value += 1;
 });
 
-watch(() => props.page, async (newVal, oldVal) => {
-  console.info('props.page watch 발동', `${oldVal} -> ${newVal}`);
-
-  if (newVal) {
-    boardStore.currentPage = Number(newVal);
-  } else {
-    boardStore.currentPage = 1;
-  }
-  // boardStore.currentPage = pageNum.value;
+// watch(() => props.page, async (newVal, oldVal) => {
+//   console.info('props.page watch 발동', `${oldVal} -> ${newVal}`);
+//
+//   if (newVal) {
+//     boardStore.currentPage = Number(newVal);
+//   } else {
+//     boardStore.currentPage = 1;
+//   }
+//   // boardStore.currentPage = pageNum.value;
+//
+//   await boardStore.getBoards(boardStore.currentPage, 10, null, null, orderBy.value);
+//
+//   renderCnt.value += 1;
+// }, {immediate: true});
 
-  await boardStore.getBoards(boardStore.currentPage, 10, null, null, orderBy.value);
+watch(pageNum, async (newPage) => {
+      console.info('props.page watch 발동');
 
-  renderCnt.value += 1;
-}, {immediate: true});
+      boardStore.currentPage = newPage;
+      await boardStore.getBoards(newPage, 10, null, null, orderBy.value);
 
-// watch(() => page, async (newPage) => {
-//       console.info('props.page watch 발동');
-//
-//       boardStore.currentPage = newPage.value;
-//       await boardStore.getBoards(newPage.value, 10, null, null, orderBy.value);
-//
-//       renderCnt.value += 1;
-//     },
-//     {immediate: true}
-// );
+      // renderCnt.value += 1;
+    },
+    {immediate: true}
+);
 
 function enter() {
   if (window.event.keyCode === 13) {

diff --git a/src/components/sub/PagenationComponent.vue b/src/components/sub/PagenationComponent.vue
@@ -96,10 +96,12 @@ function goNextPage() {
         <!--        <li v-for="idx in showPages" :key="idx" @click="getPage(idx)"-->
         <!--            :class="idx === page? 'current-page' : ''">{{ idx }}-->
         <!--        </li>-->
-        <router-link v-for="idx in showPages" :key="`page-${idx}`"
-                     :to="{ name: category, query: { page: idx }, force: true }">
-          <li :class="idx === page? 'current-page' : ''">{{ idx }}</li>
-        </router-link>
+        <li v-for="idx in showPages" :key="`page-${idx}`" :class="idx === page? 'current-page' : ''">
+          <router-link :to="{ name: category, query: { page: idx }, force: true }">
+            {{ idx }}
+          </router-link>
+        </li>
+
       </ul>
     </div>
     <div class="next-button">