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

Question

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

Answer 1

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

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>

单击时向按钮添加背景颜色保持该状态，直到在 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

vuejs2

element-ui