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

Question

[Heretic Man]

При клике на одну кнопку класс ставится на все дивы (смотря на код js это ожидаемо). Как организовать код, чтобы класс переключался только у того блока, на который нажимаешь?

<div id="app">
  <div class="toggle1" :class="{_active: isActive}" @click="toogle">Toggle 1</div>
  <div class="toggle2" :class="{_active: isActive}" @click="toogle">Toggle 2</div>
</div>

.toggle1, .toggle2 {
  background: #555;
  height: 50px;
  width: 100px;
  color: #fff;
  text-align: center;
  margin-bottom: 30px;
}

._active {
  background: green !important;
}

let app = new Vue({
  el: '#app',
  data: {
    isActive: false
  },
  methods: {
    toogle: function() {
      this.isActive = !this.isActive;
    }
  }
});

Answer 1

[0xD34F]

data: () => ({
  items: [
    { active: false, text: '...' },
    { active: false, text: '...' },
    ...
  ],
}),

<div
  v-for="n in items"
  v-text="n.text"
  :class="[ { active: n.active }, 'toggle' ]"
  @click="n.active = !n.active"
></div>

UPD. Вынесено из комментариев:

а как сделать чтобы не городить кучу даныx в data?

Типа, лучше городить ещё большую кучу html кода? Нет, так дела не делаются. По крайней мере, при использовании vue, тут данные первичны.

Хотя, можно и без данных - если вы разметку генерите автоматически, без копипасты:

data: () => ({
  itemsCount: 5,
  active: [],
}),
methods: {
  toggle(item) {
    const i = this.active.indexOf(item);
    if (i === -1) {
      this.active.push(item);
    } else {
      this.active.splice(i, 1);
    }
  },
},

<div
  v-for="i in itemsCount"
  v-text="`Item ${i}`"
  :class="[ { active: active.includes(i) }, 'toggle' ]"
  @click="toggle(i)"
></div>

Comments

[Heretic Man]

а как сделать чтобы не городить кучу даныx в data?

[0xD34F]

Дополнил ответ.

[Heretic Man]

Спасибо бро!