如何在 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 Genres

getGenre(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并启用/禁用一个类。statebuttonsListnew Vue({&nbsp; el: '#app',&nbsp;&nbsp;&nbsp; data: {&nbsp; &nbsp; buttonsList: [&nbsp; &nbsp; &nbsp; { genre: "Folk", state: false },&nbsp; &nbsp; &nbsp; { genre: "Rap", state: false },&nbsp; &nbsp; &nbsp; { genre: "Pop", state: false },&nbsp; &nbsp; ]&nbsp; },&nbsp;&nbsp;&nbsp; methods: {&nbsp; &nbsp; getGenre (buttons, i) {&nbsp; &nbsp; &nbsp; this.buttonsList[i].state = !this.buttonsList[i].state&nbsp; &nbsp; }&nbsp; }}).am-active {&nbsp; &nbsp; background-color: rgb(21, 79, 202);&nbsp; &nbsp; color: white;&nbsp;}&nbsp;.am-not-active {&nbsp; &nbsp; background-color: white;&nbsp;}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app">&nbsp; <ul>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <button&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; v-for="(buttons, i) in buttonsList" v-on:click="getGenre(buttons, i)"&nbsp; &nbsp; &nbsp; &nbsp; :class="{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'am-active': buttons.state,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'am-not-active': !buttons.state&nbsp; &nbsp; &nbsp; &nbsp; }"&nbsp; &nbsp; &nbsp; &nbsp; :key="i"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; {{ buttons.genre }}.&nbsp;&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; </li>&nbsp; </ul></div>