Задать вопрос
nastya_zholudeva
@nastya_zholudeva
vue

Как организовать переключение класса с помощью vue?

<ul class="view-block">
                            <li class="view-block__item" :class="{active: sortListOpened.sort}">
                                <a class="view-block__link btn-column js-catalog-view" @click="changeView($event, 'sort')">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </a>
                            </li>
                            <li class="view-block__item" :class="{active: sortListOpened.sort}">
                                <a class="view-block__link  btn-column  btn-block js-catalog-view" @click="changeView($event, 'sort')">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </a>
                            </li>
                        </ul>


Нужно чтобы при клике на li у текущего добавлялся класс active, а у второго удалялся этот класс. С помощью jQuery это реализовано так 
$('.js-catalog-view').click(function() {
            if ($(this).parent().hasClass("active")) {
                return false;
            }
            $(this).parent().siblings().removeClass('active');
            $(this).parent().addClass('active');
            $('.main-catalog-list').toggleClass('catalog-block');
            return false;
        });


Я стараюсь сделать это с помощью vue+jQuery
data () {
            return {
                sortListOpened: {
                    sort: false,
                    filter: false
                }
            }
        },
        methods: {
            changeView(e, kind) {
                let $this = $(e.target);
                this.sortListOpened[kind] = !this.sortListOpened[kind];
                if (!this.sortListOpened.sort) {
                    return;
                }else {
                    $this.parent().siblings().removeClass('active');
                    $this.parent().addClass('active');
                    $('.main-catalog-list').toggleClass('catalog-block');
                }
            }
        },

Но работает не совсем правильно
  • Вопрос задан
  • 593 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Так, а в чём принципиальная разница между элементами li? - что-то я таковой не улавливаю. Сделайте массив, содержащий их описания, классы и количество span'ов будут задаваться отдельными свойствами. Дальше обрабатывайте этот массив через v-for. Также добавьте в компонент свойство, которое будет содержать в себе индекс активного элемента, и тогда назначение класса active станет задачей тривиальной:

data: () => ({
  active: null,
  items: [
    { text:  'hello, world!!', numSpans: 3, classes: [] },
    { text:  'fuck the world', numSpans: 6, classes: [ 'yyy' ] },
    { text: 'fuck everything', numSpans: 0, classes: [ 'zzz' ] },
  ],
}),

<ul>
  <li v-for="(n, i) in items" :class="{ active: active === i }">
    <a :class="[ 'xxx', ...n.classes ]" @click="active = i">
      {{ n.text }}
      <span v-for="s in n.numSpans"></span>
    </a>
  </li>
</ul>

.active {
  background: red;
}
Ответ написан
7 комментариев
7 комментариев
Пригласить эксперта
Ответы на вопрос 1
SPAHI4
@SPAHI4
реактовцы - это не девы, а прокидыватели пропсов
Неправильно делаете. С таким подходом проще остаться на jQuery. Подход заключается в том, что шаблон отражает данные. Как уже сказали, данные (я не знаю vue, но, судя по всему, это this.data), будут - текущий выбранный элемент. Как его идентифицировать - решайте сами, по созданному id, url'у, или индексу. Затем в шаблоне по условию выводим класс или нет.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Разработчик Vue.js
Кортекс
от 60 000 до 100 000 ₽
Frontend developer (middle/senior)
//stablecode
от 210 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Дописать функцию на Flutter, работа с yandex map kit
20 апр. 2024, в 04:18
3000 руб./за проект
Английская версия для сайта на WordPress
20 апр. 2024, в 03:34
8000 руб./за проект
Доработать клиентское приложение для GTA 5 на C#
20 апр. 2024, в 00:51
1000 руб./за проект
Ещё заказы