单击时向按钮添加背景颜色会保持该状态，直到在 vue js 2 中单击该按钮组中的下一个按钮

【问题标题】：Adding background colour to a button when clicked stays in that state until the next button clicked in that button group in vue js 2单击时向按钮添加背景颜色会保持该状态，直到在 vue js 2 中单击该按钮组中的下一个按钮
【发布时间】：2019-02-23 06:22:34
【问题描述】：

我有两个按钮组，它们是通过在 Vue Js 中使用 v-for 指令从数组创建的。当我单击第一个按钮组中的一个按钮时，我需要它处于焦点状态，直到单击该按钮组中的另一个按钮，焦点状态不受任何其他单击事件的影响，除了在该按钮组中单击了另一个按钮。按钮是 1.All 2. True, 3. False, 4. None 在初始阶段 1.All 按钮必须保持焦点，直到单击该按钮组中的下一个按钮。

【问题讨论】：

标签： vuejs2 element-ui

【解决方案1】：

通过向每个数组元素添加一个 active 属性来跟踪活动按钮：

new Vue({
  el: '#app',
  data: () => ({
    buttons: [
      {
        text: 'All',
        active: true
      },
      {
        text: 'True',
        active: false
      },
      {
        text: 'False',
        active: false
      },
      {
        text: 'None',
        active: false
      }
    ]
  }),
  methods: {
    activate (b) {
      this.buttons.forEach(button => {
        button.active = button.text === b.text
      })
    }
  }
})

button {
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button v-for="(b,i) in buttons" :key="i" type="button" :style="{ 'background-color': b.active ? 'green' : 'grey' }" @click="activate(b)">{{ b.text }}</button>
</div>

【讨论】：