Chupachar
@Chupachar
front-end dev

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

Мне нужно чтобы при отработке фильтра ( функции changeOption ), подкрасился самый первый элемент в пагинации (принудительно). Сейчас, если я на 2 номере пагинации, то показывается 2 страница как активная (работает в обе стороны):
65d37f39e6541561994037.png
но если я применяю фильтр, то вижу такую картину:
65d37f6bf0268459962333.png
в данном случае с сервера пришла 1 страница и я вывел её в список, но она не подсветилась.
То есть activeLink у меня почему-то остался как 2, хотя в хранилище activePaginationPage === 1 и после перезагрузки страницы всё отработало как нужно:
65d37fe124ed5455556484.png

Происходит какой-то рассинхрон и я пока не понял как это исправить, будто 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>
  • Вопрос задан
  • 48 просмотров
Решения вопроса 1
cyber-jet
@cyber-jet
Ни какого рассинхрона не происходит, просто данные передаются в одну сторону, самое простое, в TheAdminPagination.vue повесить вотчер на totalPages, если меняется, сбрасывать на 1. В данном коде передавать prop currentPage из родителя не имеет ни какого смысла.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы