Как добавлять и убирать класс соседних блоков?

Question

[Aleksandr_KH]

Всем привет.
У меня есть две кнопки. Button1 и Button2.
Как мне по клику на Button1 добавлять ему класс active, а по клику на Button2 убирать у Button1 active, а Button2 соответственно его добавлять (класс Active). Это первая задача.

Вторая задача, есть еще блок (Block), мне нужно чтобы по клику на Button1 на Block навешивался например класс test1, а по клику на Button2, класс test1 удалялся и вместо него добавлялся класс test2.

По большому счет это должно примерно работать как табы, но я не смог найти нормального простого решения.

Для полного понимаю набросал разметку.

Answer 1

[0xD34F]

Складываем данные кнопок и блоков в массив, также добавляем в компонент свойство - ссылку на активный элемент массива (это чья кнопка должна получить класс active и класс которого надо назначить блоку):

data: () => ({
  items: [
    { buttonTitle: '...', blockClass: '...' },
    { buttonTitle: '...', blockClass: '...' },
    ...
  ],
  active: null,
}),

На основе массива создаём кнопки, по клику устанавливаем значение активного элемента:

<button
  v-for="n in items"
  :class="{ active: active === n }"
  @click="active = n"
>{{ n.buttonTitle }}</button>

Соответственно, если активный элемент не null - показываем блок, назначая ему класс:

<div v-if="active" :class="[ 'block', active.blockClass ]">

https://jsfiddle.net/bwmk7f1t/

Comments

[Aleksandr_KH]

Спасибо, а как сделать, чтобы первый был активным сразу?

[0xD34F]

Aleksandr_KH, можно устанавливать его в created:

created() {
  this.active = this.items[0];
}

Или вместо ссылки на объект хранить индекс, который изначально будет 0, а active сделать вычисляемым свойством:

activeIndex: 0,
...
computed: {
  active() {
    return this.items[this.activeIndex];
  }
}

v-for="(n, i) in items"
@click="activeIndex = i"

[Aleksandr_KH]

0xD34F, Большое спасибо. Вы реально делаете крутые вещи, помогая людям!

Answer 2

[Evgeny Kulakov]

<button v-for="button in 2" :key="button" @click="active = button" :class="{active: active === button}">button</button>
<div id="block" :class="`test${active}`">