Изменить фон "нажатой" текущей кнопки

Question

Когда я нажимаю кнопку в списке кнопок, все кнопки в for -l oop меняют свой фон. Я уже добавил метод на click и применил CSS к кнопке, но я не знаю, как изменить цвет фона только для нажатой кнопки.

Приложение. vue:

<template>
  <div id="app">
    <!-- <button v-on:click="counter += 1">Add 1</button> -->
    <button
      class="button variation colors"
      v-for="(p,index) in varbutss"
      :key="index"
      :id="p.items_id"
      :value="p.color"
      @click="colorclick(p.items_id,p.color)"
    >{{p.color}}</button>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "App",
  methods: {
    colorclick: function(e,color) {
      console.log(e);

      $(".colors").css("background-color", color);
    }
  },
  data() {
    return {
      varbutss: [
        {
          items_id: 1,
          color: "red"
        },
        {
          items_id: 2,
          color: "blue"
        }
      ]
    };
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

https://codesandbox.io/s/optimistic-dijkstra-st34h?file= / src / App. vue

Answer 1

Проблема в этой строке:

$(".colors").css("background-color", color);

Код $(".colors") находит все элементы с именем класса colors. Поскольку каждой кнопке назначен класс colors, возвращаются все кнопки, что приводит к тому, что все кнопки имеют одинаковый цвет.

Ваш click -handler передает идентификатор кнопки в качестве первого аргумента, чтобы вы могли используйте это в своем запросе, чтобы ограничить объем изменения цвета этой кнопки. То есть измените селектор на #BUTTONID.colors:

colorclick: function(e, color) {
  $(`#${e}.colors`).css("background-color", color);
}

demo

Однако следует избегать манипуляций с DOM (с jQuery), потому что эти изменения будут перезаписаны, если Vue повторно визуализирует компонент. Обычно есть способ переписать код, не манипулируя DOM. Например, вы можете применить class на основе переменной, установленной вашим click-обработчиком.