一次激活一个按钮的切换

Question

我从引导程序中获取了此代码：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。
简而言之，只有一个按钮必须处于活动状态，不能再有。
看起来很简单，问题出现了，因为点击组件有一个焦点，当你点击屏幕上的任何其他地方时，它就会消失，因此不是真正的活动。

Answer 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)
  }
}

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