Как мне переключить класс, чтобы показать, какая вкладка активна в VueJS? - PullRequest
Новая
       17

Как мне переключить класс, чтобы показать, какая вкладка активна в VueJS?

1 голос
/ 22 апреля 2019

Я создал две вкладки, которые я хотел бы, чтобы класс активного набора для первого <li> по умолчанию.

Затем, когда выбрана вторая вкладка, класс .active должен перейти ко второй <li> и удалить из первой.

Я могу использовать CSS для создания некоторых правил стиля, чтобы дать визуальный индикатор того, какая вкладка активна в данный момент.

Я также создал JS Fiddle , чтобы увидеть текущий вывод.

Любая помощь приветствуется, поскольку я довольно застрял. 

<ul class="overlay-panel-actions-primary">
    <li v-for="(tab, index) in tabs" @click="currentTab = index">{{tab}}</li>
</ul>
<div class="content-bd">
    <div class="tab-content">
        <div v-show="currentTab === 0">
            List of filters options
        </div>
        <div v-show="currentTab === 1">
            List of sort options
        </div>
    </div>
</div>

new Vue({
  el: "#app",
    data() {
        return {
            currentTab: 0,
            tabs: ['Filter', 'Sort']
        };
    },
})

Ответы [ 2 ]

2 голосов
/ 22 апреля 2019

Используйте это -

: class = "{active: currentTab === index}" 

<li v-for="(tab, index) in tabs" @click="currentTab = index" :class="{active: currentTab === index}">{{tab}}</li>

Дайте мне знать, если это работает.

Скрипка - https://jsfiddle.net/so3mf8h9/

0 голосов
/ 22 апреля 2019

Редактировать : Ах, извините, я думал, что вы используете vue-router. Когда ваш сайт становится больше, возможно, стоит начать использовать маршрутизатор, и когда вы это сделаете, этот метод будет работать для вас ?

Эта функция встроена в Vue ?

Все, что вам нужно сделать, это добавить это в таблицу стилей 

.router-link-exact-active {
    // Your styles go here
    border: 5px dashed red;
}

Ссылка: Документация Vue

Вот пример того, как я реализовал это на сайте Vue, который я сделал пару недель назад: Разметка и Стили . Надеюсь, это поможет, дайте мне знать, если у вас есть еще вопросы по реализации этого ?

...