@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;
}
  • Вопрос задан
  • 157 просмотров
Решения вопроса 1
@frankieksai
Проверять на активность можно не через булеан флаг, а ставить например selected = data.key и класс тогда проверять
:class = "{'greenlight':selected == data.key}"
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@tantumus21
Используте components. Через components создаете собственный компонент. И каждый такой компонент в списке будет как бы отдельным приложением со своей конфигурацией.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы