Как сделать табы во VUE JS?

Question

[Маленький Вася]

Всем привет, натягиваю на фронт магазинчик, столкнулся с проблемой..
Нужно организовать табы, где "Мука", "Пекарня", дело в том что будут добавлятся новые категории и у каждой категории непосредсвенно свои продукты, при нажатии на ту иную категорию должна отобразится те иные продукты, как лучше всего это реализовать

Answer 1

[Антон Антон]

https://codepen.io/anon/pen/BVZZvr

Answer 2

[Roman K]

Хочешь — вложенными роутами (будет возможность скидывать ссылку с открытым табом)
Хочешь — обычным полем в data (activeTab) + v-show
Можно даже v-if, но если по табам будут часто кликать, то это очень менее производительно

Answer 3

[Konstantin Malyarov]

https://bootstrap-vue.js.org/

Comments

[Антон Антон]

Раньше использовал, но отказался в пользу vue + bulma.io (причем бульма без всяких прослоек и промежуточных компонентов). В итоге получается проще - верстальщик может сверстать статичный вариант, который простейшим образом переделывается в компоненты, так как кастомные теги отсутствуют как класс.