Как создать табы на vue?

Question

[wakenby]

Хочу создать такие табы:


Чтобы при смене активной кнопки, линия перемещалась(ездила) до активной кнопки. Но не понимаю как такое сделать, работать с dom напрямую плохая практика, а как средствами vue сделать не могу даже предположить как

Comments

[Александр Маджугин]

А как бы вы сделали, если бы прямая работа с DOM не считалась бы плохой практикой?

[wakenby]

Александр Маджугин, В mounted нашел бы все табы querySelectorAll, и повесил бы на них событие клика. После брал информацию о том табе, на который кликнули, нашел бы через ref линию и указал бы ему нужные стили.

Спасибо! Я вроде понял как. На каждый tab повесить событие клика, и в методе которые обрабатывает клик, смотреть на $event.target, и забирать ширину, и позицию с лева в родителе. После через ref получить line, и указать ей нужные стили.

А вот как удалять активный класс со старого tab идей нет, если ставить то легко, $event.target.classList.add(), а вот удалить активный класс у других tab'ов я не знаю как

[Александр Маджугин]

wakenby, на самом деле вам не надо добавлять и удалять классы.
Классы вы должны реализовать через v-bind:class и управлять ими в зависимости от состояния панелей табов.
Вы же знаете какой таб у вас сейчас активный? Ну вот и ставьте ему класс.

Как вы храните активный таб? Какая-то переменная в data?

Answer 1

[0xD34F]

работать с dom напрямую плохая практика

Не всегда. Зависит от задачи.

https://jsfiddle.net/d8rmsyge/2/

Answer 2

[Дмитрий]

кажется Вы все смешали воедино. табы или кнопки?
переключение активных пунктов можно сделать через vue-router

или так (нашел поиском),

Comments

[wakenby]

Табы, но без vue-router

[Дмитрий]

wakenby, я два варианта предложил. Если не используете динамические компоненты, но просто по клику тоглите активный класс, а дальше уже обычный css

Answer 3

[Тигран Абрамян]

https://jsfiddle.net/78ksdon0/

Comments

[wakenby]

Спасибо, как основа не плохая, попробую сделать из этого то что нужно