Можно ли отрисовывать Vue компонент в скрытый display: none контейнер (речь о Swiper)?

Question

[Redrica]

Есть слайдер, реализован компонентом через vue-awesome-swiper. В момент загрузки страницы компонент еще не успевает отработать, соответственно все картинки в этом слайдере на секунду выстраиваются в длинную колонку, потом все перерисовывается уже в нормальном виде, но естественно это искажение при загрузке надо исправлять.
Решили попробовать скрывать родительский контейнер компонента через класс с display: none, отрисовывать в скрытый и в mounted снимать скрывающий класс, но выяснилось, что слайдер при этом ломается (часть его вообще не отрисовывается, функционал слетает). Если скрывать через visibility: hidden или подобными "щадящими" методами - то компонент отрисовывается нормально.

Собственно вопрос: есть ли практика отрисовки в скрытые через display контейнеры?
И, если вдруг кто знаком с vue-swiper - может сможете объяснить, как его настроить, чтобы он отрабатывал сразу при загрузке страницы. Логика мне подсказывает, что он не сработает раньше загрузки js, но вдруг есть решение?

Answer 1

[0xD34F]

Решили попробовать скрывать родительский контейнер компонента через класс с display: none, отрисовывать в скрытый и в mounted снимать скрывающий класс

Вручную возиться с классами не надо, чтобы прятать шаблон до окончания компиляции есть v-cloak.

Comments

[Redrica]

спасибо, попробую