Как сменить класс при клике у каждого элемента отдельно?

Question

[webhero]

Начал изучать Vue
Дошел до определенного момента, когда цвет переключается, но у всех объектов сразу и задался вопросом, как переключить у каждого отдельно? Указывал active: true в каждый объект, но это не помогло

<template>
  <main>
      <ul>
          <li v-bind:class="{'greenlight': active}" v-for="data in webdata" :key="data.key" @click="data.show = !data.show" v-on:click="active = !active">
            <h3 v-show="data.show">{{data.name}}</h3>
          </li>
      </ul>
  </main>
</template>

export default {
  data () { 
    return {
      active: true,
      webdata: [
        {name: 'JavaScript', show: false},
        {name: 'Vue.js', show: false}, 
        {name: 'CSS', show: false}, 
        {name: 'HTML', show: false}
      ]
    }
  }
}

.greenlight {
  background: lightgreen;
}

Answer 1

[Иван]

Проверять на активность можно не через булеан флаг, а ставить например selected = data.key и класс тогда проверять
:class = "{'greenlight':selected == data.key}"

Comments

[webhero]

а можно чуть подробнее, как и где нужно указывать selected = data.key? Я про замену булеан флага

[Иван]

Например вот так.

[webhero]

Иван, вон как, через методы. Спасибо, разобрался, работает!

Answer 2

[tantumus21]

Используте components. Через components создаете собственный компонент. И каждый такой компонент в списке будет как бы отдельным приложением со своей конфигурацией.