Изменить цвет ячейки при клике

Question

Как менять цвет ячейки при клике

<td @click="changeSelect($event)"
   v-for="(n, index) in 10">{{ n }}
</td>

В методе меняю цвет ячейки, но при клике на другую красный цвет у прошлой остаётся, а нужно чтоб при клике только одна была подкрашена красным

changeSelect(event){
  event.target.style.backgroundColor = "red";
},

Answer 1

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

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

td {
  padding: 5px;
  cursor: pointer;
  border: 1px solid #eee;
}

td: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">
  <table>
    <tr v-for="i in 4">
      <td v-for="j in 9"
        :key="`${i}${j}`"
        :class="{active: `${i}${j}` == activeIndex, green: i === 2 && j ===2}"
        @click="changeSelect(`${i}${j}`)"
       >
        {{ i }}{{ j }}
      </td>
    </tr>
  </table>
</div>

БЛОГ НА HUSL

Изменить цвет ячейки при клике

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