Как «это» чудо укоротить, или сделать проще?

Question

[alaskafx]

Доброго вечера, ночи, дня, дамы и господа.

Имеется data, в которой:

twoActive: false,
      isActive: false,

Имеется methods, в котором:

twoact(){
      this.isActive = false
      this.twoActive = true
    },
    wtactiv(){
      this.twoActive = false
      this.isActive = true
    },

Ну и имеется два заголовка h1, h2:

<h1 class="static fir" @click="wtactiv" v-bind:class="{ actived: isActive }">первое</h1>
    <h2 class="static sec" @click="twoact" v-bind:class="{ actived: twoActive  }">второе</h2>

Дело в чём...
Эти два метода так сказать "подчищают" за собой, меняя друг другу значения с true на false.
Но, а что, если у меня будет много будет заголовков, а у тех подзаголовки?
Как быть? Не "подчищать" же мне за всеми, иначе там этих this.* =* - будет очень много, да и у каждого получается метода должно быть не менее 17,

Как же быть?

Answer 1

[Philipp]

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

Answer 2

[Adamos]

<div  v-bind:class="{ active: isActive }">
  <h1 class="static fir" @click="switch">первое</h1>
    <h2 class="static sec" @click="switch">второе</h2>
</div>

Comments

[alaskafx]

[Adamos]

alaskafx, ну, не зная контекста, я не в курсе, что добавить к названию функции вторым словом.
Собственно, это не готовый код, это пример того, как начать думать в другом направлении и сделать проще.