如何在 VueJS 中切换按钮的背景颜色

Question

我正在使用 VueJS，并且有一个动态创建的流派按钮列表。这些按钮能够打开和关闭，当它们打开时，我想应用 CSS 样式（如蓝色背景）来显示它们已被选中。当它们没有被选择时，我希望它回到原来的样子（带有灰色边框的白色背景）。我的问题是我无法实现切换背景颜色功能。我尝试过使用variant="primary"以及其他变体选项，但它不起作用。我也尝试过style="border: 2px solid darkgrey; margin:2px;"在应用时擦除variant，但这也不起作用。我尝试使用StackOverflow post直接更改按钮的 CSS ，但它不起作用。这是我的 index.html 中的按钮标记：<ul style="list-style: none;">    <button v-if="ShowALLButton" v-on:click="getAllGenres" class = "btn btn-success" style="left: 0px; margin:2px;">ALL</button>        <li style="display: inline;">          <button v-for="buttons in buttonsList" v-if="ShowALLButton" v-on:click="getGenre(buttons)" :pressed.sync="buttons.state" id="buttonID" class = "btn" style="border: 2px solid darkgrey; margin:2px;">            {{ buttons.genre }}.           </button>        </li></ul>本质上，上面是一个 for 循环迭代我的 ButtonList，它是一个看起来像这样的结构，包含要在按钮上显示的类型，以及它是否已打开或关闭（由状态指示，即最初关闭，如false) 所示。实际的切换功能有效，因为它显示了正确的流派结果。但对于那些好奇的人来说，buttonList 看起来像这样（对象列表）：[{ genre: "Folk", state: false },{ genre: "Rap", state: false },{ genre: "Pop", state: false },...]index.html 中的相关样式：<style> .am-active {    background-color: rgb(21, 79, 202);    color: white; } .am-not-active {    background-color: white; }</style>处理按钮切换和流派选择的函数位于我的 script.js 中。我需要todo!应用正确的 CSS 样式来更改按钮，但我无法做到。// Get Selected GenresgetGenre(button) {  console.log("ENTERED GET GENRE!!!!!!");  var selectedGenresItems = []  // keep track of selected genres  if (!this.selectedGenres.includes(button)) {    this.selectedGenres.push(button);    // todo!    console.log("inside if");    button.className += 'am-active';    console.log(button);    // ^ the above does not work, it just adds a key with "className" = "undefinedam-active" :(  }  else {    this.selectedGenres.pop(button);    // todo! must use .am-not-active  }

Answer 1

您可以根据状态的键绑定属性class并启用/禁用一个类。statebuttonsList

new Vue({

  el: '#app',

  

  data: {

    buttonsList: [

      { genre: "Folk", state: false },

      { genre: "Rap", state: false },

      { genre: "Pop", state: false },

    ]

  },

  

  methods: {

    getGenre (buttons, i) {

      this.buttonsList[i].state = !this.buttonsList[i].state

    }

  }

})

.am-active {

    background-color: rgb(21, 79, 202);

    color: white;

 }

 .am-not-active {

    background-color: white;

 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <ul>

    <li>

      <button 

        v-for="(buttons, i) in buttonsList" v-on:click="getGenre(buttons, i)"

        :class="{

          'am-active': buttons.state,

          'am-not-active': !buttons.state

        }"

        :key="i"

      >

        {{ buttons.genre }}. 

      </button>

    </li>

  </ul>

</div>