Как правильно реализовать tabs во Vue?

Question

[MaXX77777]

Добрый день!
Пытаюсь реализовать tabs во vue js, но так как мало опыта, зашел в тупик... хочу сделать это все в одном компоненте. Когда кликаю на "все 8" - должно отображаться 8 карточек, когда курсы 5 карточек, тесты 2 карточки и события 1 карточка. Подскажите как это правильно реализовать?

<main id="app">
        <section class="education">
            <div class="container">
                <div class="education__inner">
                    <h1 class="education__title">Назначенное обучение</h1>
                    <nav class="menu-tab" id="tab">
                        <ul class="menu-tab__list">
                            <li class="menu-tab__item menu-tab__item--all active" @click="isSelect('8')">
                                <a class="menu-tab__link" href="#">Все <span class="menu-tab__add">8</span></a>
                            </li>
                            <li class="menu-tab__item menu-tab__item--cours" @click="isSelect('5')">
                                <a class="menu-tab__link" href="#">Курсы <span class="menu-tab__add">5</span></a>
                            </li>
                            <li class="menu-tab__item menu-tab__item--tests" @click="isSelect('2')">
                                <a class="menu-tab__link" href="#">Тесты <span class="menu-tab__add">2</span></a>
                            </li>
                            <li class="menu-tab__item menu-tab__item--event" @click="isSelect('1')">
                                <a class="menu-tab__link" href="#">События<span class="menu-tab__add">1</span></a>
                            </li>
                        </ul>
                    </nav>
                    <div class="education__content">
                        <a class="education__content-card" href="#" v-if="isActive === '8'"
                            v-else-if="isActive === '8'">
                            <img v-bind:src=message[0].image class="education__content-image" alt="">
                            <div class="education__progress">
                                <div class="education__progress-cours">{{ message[0].type }}</div>
                                <div class="education__progress-pass">не пройдено</div>
                            </div>
                            <div class="education__progress-bar "></div>
                            <h2 class="education__card-title education__card-title--deep">{{ message[0].name }}</h2>
                            <div class="education__event">
                                <img class="education__event-image" src="images/event.svg"
                                    alt="24-часовой рабочий день">
                                <div class="education__event-info">Доступен до: {{ message[0].date }}</div>
                            </div>
                        </a>
                        <a class="education__content-card" href="#" v-if="isActive === '5'"
                            v-else-if="isActive === '8'">
                            <img v-bind:src=message[1].image class="education__content-image" alt="">
                            <div class="education__progress">
                                <div class="education__progress-cours">{{ message[1].type }}</div>
                                <div class="education__progress-pass">{{message[1].progress}} пройдено</div>
                            </div>
                            <div class="education__progress-bar">
                                <span class="education__progress-bar--procent" style="width:34%;"></span>
                            </div>
                            <h2 class="education__card-title">{{ message[1].name }} </h2>
                            <div class="education__event">
                                <img class="education__event-image" src="images/event.svg"
                                    alt="Эксперт назвал способ навсегда покончить с нападками">
                                <div class="education__event-info">Доступен до: {{ message[1].date }}</div>
                            </div>
                        </a>
                        <a class="education__content-card" href="#" v-if="isActive === '2'"
                            v-else-if="isActive === '8'">
                            <img v-bind:src=message[2].image class="education__content-image" alt="">
                            <div class="education__progress">
                                <div class="education__progress-cours">{{ message[2].type }}</div>
                                <div class="education__progress-pass">{{message[2].progress}} пройдено</div>
                            </div>
                            <div class="education__progress-bar">
                                <span class="education__progress-bar--procent" style="width:53%;"></span>
                            </div>
                            <h2 class="education__card-title">{{message[2].name}} </h2>
                            <div class="education__event">
                                <img class="education__event-image" src="images/event.svg"
                                    alt="Агрегаторы станут нести ответственность за услуги">
                                <div class="education__event-info">Доступен до: {{ message[2].date }}</div>
                            </div>
                        </a>
                        <a class="education__content-card" href="#" v-if="isActive === '1'"
                            v-else-if="isActive === '8'">
                            <img v-bind:src=message[3].image class="education__content-image" alt="">
                            <div class="education__progress">
                                <div class="education__progress-cours">{{ message[3].type }}</div>
                                <div class="education__progress-pass">не пройдено</div>
                            </div>
                            <div class="education__progress-bar education__progress-bar--short"></div>
                            <h2 class="education__card-title education__card-title--low">{{message[3].name}}
                            </h2>
                            <div class="education__event">
                                <img class="education__event-image" src="images/event.svg"
                                    alt="Упаковка и маркировка товара">
                                <div class="education__event-info">Доступен до: {{ message[3].date }}</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </section>


    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: '',
                isActive: '1',
            },

            mounted() {
                axios
                    .get('education.json')
                    .then(response => (this.message = response.data))
            },

            methods: {
                isSelect: function (num) {
                    this.isActive = num;
                }
            }
        })
    </script>

Comments

[Froggyweb]

Карточки должны быть не в шаблоне, а в data и выводится циклом с проверкой значения или статуса в табе

[MaXX77777]

Froggyweb, возможно ли это сделать, не создавая шаблон ? А то что уже есть?

Answer 1

[Александр]

вы всю логику запихнули в шаблон
зачем такая боль :)

сделайте в data свойство, например selectedItem
и по клику таба записывайте туда выбранное свойство

и потм сделайте компьютед метод
в который будет фильтровать массив по selectedItem

выбросите из шаблона все условия, сделайте простой вывод списка
а данные берите из этого компьютед свойства

Comments

[MaXX77777]

можете привести пример? как это сделать? я с этим только начал работать...