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

Question

[nastya_zholudeva]

<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');
                }
            }
        },

Но работает не совсем правильно

Answer 1

[0xD34F]

Так, а в чём принципиальная разница между элементами 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;
}

Comments

[nastya_zholudeva]

0xD34F, у них классы есть разные. По сути они отвечают за различное отображение элементов(первый - колонками, второй - блоками). Точнее теги а внутри них

[0xD34F]

Ну добавьте эти разные классы как свойство элементам items и

:class="[ 'класс, общий для всех', 'ещё какой-то класс, общий для всех', ...n.classes ]"

Тэги внутри - тоже отдельное свойство, для вывода можете использовать v-html, например.

[nastya_zholudeva]

0xD34F, Точнее теги а внутри них

[0xD34F]

Что тэги a? В смысле - количество span'ов внутри разное? Ответ обновил.

[nastya_zholudeva]

0xD34F, спасибо большое:)

[nastya_zholudeva]

0xD34F, извините пожалуйста, последний вопрос. Как сделать чтобы по умолчанию был активен первый li. А потом уже при клике как в последнем вашем примере:)

[0xD34F]

В качестве дефолтного значения свойства active укажите 0 вместо null.

Answer 2

[Антон]

Неправильно делаете. С таким подходом проще остаться на jQuery. Подход заключается в том, что шаблон отражает данные. Как уже сказали, данные (я не знаю vue, но, судя по всему, это this.data), будут - текущий выбранный элемент. Как его идентифицировать - решайте сами, по созданному id, url'у, или индексу. Затем в шаблоне по условию выводим класс или нет.