一次激活一个按钮的切换答案

【问题标题】：activate the toggle on one button at a time一次激活一个按钮的切换
【发布时间】：2021-04-20 15:58:07
【问题描述】：

我有这段代码取自引导程序：https://bootstrap-vue.org/docs/components/button#pressed-state-and-toggling

<template>
<div>
 <b-button-group size="sm">
  <b-button
    v-for="(btn, idx) in buttons"
    :key="idx"
    :pressed.sync="btn.state"
    variant="primary"
  >
    {{ btn.caption }}
  </b-button>
 </b-button-group>
 <p>Pressed States: <strong>{{ btnStates }}</strong></p>
 </div>
</template>

 <script>
   export default {
     data() {
       return {
         buttons: [
           { caption: 'Toggle 1', state: true },
           { caption: 'Toggle 2', state: false },
           { caption: 'Toggle 3', state: false },
           { caption: 'Toggle 4', state: false }
         ]
       }
     },
     computed: {
       btnStates() {
         return this.buttons.map(btn => btn.state)
       }
     }
   }
 </script>

我希望切换开关适用于单个元素，即只有一个元素可以是 true。
因此，当您单击一个元素时，它会变为true，但如果已经有其他元素 true，它们必须变为false。
简而言之，只有一个按钮必须处于活动状态，不再有。
这似乎是一件容易的事，但问题出现了，因为单击组件有一个焦点，当您单击屏幕上的其他任何位置时，它会消失，因此不是真正的活动。

【问题讨论】：

你问的是切换还是焦点？
他们俩...

标签： javascript vue.js vuejs2 vue-component bootstrap-vue

【解决方案1】：

您可以使用click 处理程序创建唯一的功能，该处理程序使用单击按钮的索引。处理程序将取消按下所有其他按钮。

<b-button
   v-for="(btn, idx) in buttons"
   :key="idx"
   :pressed.sync="btn.state"
   variant="primary"
   @click="onPress(idx)"
>

methods: {
  onPress(i) {
    this.buttons.forEach((b, index) => b.state = i === index)
  }
}

失去焦点实际上不会改变任何按钮的按下状态，它只会失去视觉焦点边框。

【讨论】：