Как решить проблему с рассинхронизацией данных при вызове функции?

Question

[Andy Koshman]

Мне нужно чтобы при отработке фильтра ( функции changeOption ), подкрасился самый первый элемент в пагинации (принудительно). Сейчас, если я на 2 номере пагинации, то показывается 2 страница как активная (работает в обе стороны):

но если я применяю фильтр, то вижу такую картину:

в данном случае с сервера пришла 1 страница и я вывел её в список, но она не подсветилась.
То есть activeLink у меня почему-то остался как 2, хотя в хранилище activePaginationPage === 1 и после перезагрузки страницы всё отработало как нужно:


Происходит какой-то рассинхрон и я пока не понял как это исправить, будто activeLink не успевает понять, что значение поменялось. Подскажите пожалуйста как решить задачу, вот примерный код:

// компонент TheAdminFilter.vue - потомок

<template>
 <BaseSelect @change="changeOption(list.id)" />
</template>
<script setup>
const changeOption = async (id) => { // выбираю фильтр и отправляю событие родителю
 try {
      const response = await axios.get(URL);
      
      emit('filtered-total-pages', response.data.TotalPages); //передаю родителю количество всех страниц
      emit('filtered-page', response.data.Page); // передаю родителю 1, как страница по умолчанию при фильтрации

  } catch (error) {
      console.log(error);
  }
}
</script>

// TheAdminTable.vue - родитель

<template>
    <TheAdminFilter @filtered-page="handlePage" @filtered-total-pages="handleTotalPages"/> 
    <TheAdminPagination :currentPage="currentPage" :totalPages="totalPages" /> //передаю новоприбывшие пропсы потомку 
</template>
<script setup>
const totalPages = ref(null);
const currentPage = ref(null);

const handleTotalPages = (totalPages) => {
    totalPages.value = totalPages; // присваиваю totalPages количество всех страниц
}

const handlePage = (page) => {
    currentPage.value = page; // присваиваю currentPage = 1
}
</script

>

// TheAdminPagination.vue - потомок

<template>
 <li v-for="page in totalPages" 
     :key="page">
     <a 
       @click.prevent="goToPage(page)"
       :class="[paginationPageClasses, { 'active-pagination': page === activeLink }]"> //подкрашиваю текущую страницу 
         {{ page }}
       </a>
  </li>
</template>
<script setup>
const props = defineProps({
    totalPages: {
        type: Number, //все страницы
    },
    currentPage: {
        type: Number,//текущая, по умолчанию всегда 1
    },
});

const emit = defineEmits(['pagination-page'])

// функция перехода по страницам
const goToPage = (pageNumber) => {

    const newPage = Math.min(Math.max(1, pageNumber), props.totalPages);

    emit('pagination-page', newPage);
    setActiveLink(newPage);
};

const activeLink = ref(JSON.parse(localStorage.getItem('activePaginationPage')) || 1);

//сохраняю текущую страницу в storage
function setActiveLink(index) {
    localStorage.setItem('activePaginationPage', JSON.stringify(index));
    activeLink.value = index;
}

onMounted(() => {
    if(activeLink.value === null) {
        localStorage.setItem('activePaginationPage', JSON.stringify(1));
        activeLink.value = 1;
    }
})
</script>

Answer 1

[Евгений]

Ни какого рассинхрона не происходит, просто данные передаются в одну сторону, самое простое, в TheAdminPagination.vue повесить вотчер на totalPages, если меняется, сбрасывать на 1. В данном коде передавать prop currentPage из родителя не имеет ни какого смысла.

Comments

[Andy Koshman]

Да, вы правы, мне действительно нужен был вотчер, не догадался. По факту я решил попробовать в changeOption отправить событие emit('filter-active');из фильтра через родителя в пагинацию, и в пагинации отслеживать булеан, если событие фильтра true, то присвоить принудительно 1

watch(() => props.activatedFilter, (newPage) => {
        activeLink.value = 1;
});

, а с totalPages небольшие проблемы были при отслеживании. Всё работает, спасибо за наводку. UPD Я ошибся, вотчер сработает только 1 раз при первом true.