Отрисовывается список из массива в компоненте через v-for, затем по

Question

Отрисовывается список из массива в компоненте через v-for, затем по

нажатию кнопки , массив сортируется и список реактивно перерисовывается. С этим всё норм. Но хочу сделать прелоадер чтобы крутился пока идет перерисовка (список длинный). Как мне отловить событие что браузер закончил перерисовку? ( и уберу прелоадер) Нужно именно окончание перерисовки визуальное, а не окончание сортировки в исходном массиве. На чистом js делаю без проблем, а вот как быть с v-for?

#frontend #javascript #programming #russian #vue.js

0

24.01.2021

10 ответов

12 просмотров

Марат

Посмотри на хуки

0

24.01.2021

buildUsBackAgain Автор вопроса

Anatoly D
Точно не уверен, но может хук update или beforeUpd...

update() срабатывает на 2-3 сек раньше чем отрисуется, я так понимаю реагирует на окончание сортировки и цикла в виртуальном DOM, а самой перерисовки не дожидается (список очень длинный)

0

24.01.2021

Anatoly D

buildUsBackAgain
update() срабатывает на 2-3 сек раньше чем отрисуе...

А на чистом JS как вы это делали?

0

24.01.2021

Timur Svoboda

buildUsBackAgain
update() срабатывает на 2-3 сек раньше чем отрисуе...

У вас в коде написано update или updated?

0

24.01.2021

buildUsBackAgain Автор вопроса

Timur Svoboda
У вас в коде написано update или updated?

updated(), опечатка была здесь

0

24.01.2021

Timur Svoboda

buildUsBackAgain
updated(), опечатка была здесь

Попробуйте использовать beforeUpdate

0

24.01.2021

buildUsBackAgain Автор вопроса

Anatoly D
А на чистом JS как вы это делали?

в цикле добавляю в контейнер через wrapper.append(elem), и по окончании цикла блоку с прелоадером назначаю класс с display: none; методом prel.classList.app('hidden') и всё четко срабатывает.

0

24.01.2021

buildUsBackAgain Автор вопроса

Timur Svoboda
Попробуйте использовать beforeUpdate

не, beforeUpdate еще быстрее срабатывает, что логично ))) кстати на него можно прицепить появление прелоадера

0

24.01.2021

Марат

buildUsBackAgain
не, beforeUpdate еще быстрее срабатывает, что логи...

У transition есть свои события, попробуй через них https://ru.vuejs.org/v2/api/#transition

0

24.01.2021