Item click меняющий фон блока

Question

Как реализовать 10 блоков который будут активны На активный блок менять его фон Если нажали на другой блок старый станет в прежный background, а активный поменяет свой цвет

Answer 1

Используйте key для того, чтобы отметить div, на котором "кликнули", дополнительным классом css, перед присвоением класса - проверьте не нажали ли на активный элемент, если так то уберите у него дополнительный класс

Рабочий пример:

new Vue({
  el: '#app',
  data: {
    activeIndex: 0,
  },
  methods: {
    changeSelect(index) {
      if (this.activeIndex === index) {
        this.activeIndex = 0
      } else {
        this.activeIndex = index
      }
    },
  },
})

#app {
  display: flex;
}

#app>div {
  padding: 15px;
  cursor: pointer;
  border: 1px solid #eee;
}

#app>div:hover {
  border: 1px solid red;
}

.green {
  background: green;
}

.active {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <div v-for="i in 10" :key="i" :class="{active: i == activeIndex, green: i === 2}" @click="changeSelect(i)">
    {{ i }}
  </div>
</div>

БЛОГ НА HUSL

Item click меняющий фон блока

Ответы (1 шт):