diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue index ed9a33069..252dce76e 100644 --- a/packages/client/src/pages/messaging/index.vue +++ b/packages/client/src/pages/messaging/index.vue @@ -13,7 +13,7 @@ <MkButton primary class="start" @click="startUser"><i class="ph-plus-bold ph-lg"></i> {{ i18n.ts.startMessaging }}</MkButton> - <MkPagination v-slot="{ items }" :pagination="dmsPagination"> + <MkPagination v-slot="{ items }" ref="paginationComponentUser" :pagination="dmsPagination"> <MkChatPreview v-for="message in items" :key="message.id" class="yweeujhr message _block" :message="message" /> </MkPagination> @@ -28,7 +28,7 @@ i18n.ts.startMessaging }}</MkButton> </div> - <MkPagination v-slot="{ items }" :pagination="groupsPagination"> + <MkPagination v-slot="{ items }" ref="paginationComponentGroup" :pagination="groupsPagination"> <MkChatPreview v-for="message in items" :key="message.id" class="yweeujhr message _block" :message="message" /> </MkPagination> @@ -41,7 +41,7 @@ </template> <script lang="ts" setup> -import { markRaw, onMounted, onUnmounted, watch, computed } from 'vue'; +import { markRaw, onMounted, onUnmounted, watch, computed, onActivated } from 'vue'; import * as Acct from 'calckey-js/built/acct'; import { Virtual } from 'swiper'; import { Swiper, SwiperSlide } from 'swiper/vue'; @@ -65,6 +65,9 @@ let messages = $ref([]); let groupMessages = $ref([]); let connection = $ref(null); +let paginationComponentUser = $ref<InstanceType<typeof MkPagination>>(); +let paginationComponentGroup = $ref<InstanceType<typeof MkPagination>>(); + const tabs = ['dms', 'groups']; let tab = $ref(tabs[0]); watch($$(tab), () => (syncSlide(tabs.indexOf(tab)))); @@ -210,6 +213,11 @@ onMounted(() => { onUnmounted(() => { if (connection) connection.dispose(); }); + +onActivated(() => { + paginationComponentUser.reload(); + paginationComponentGroup.reload(); +}); </script> <style lang="scss" scoped>