一次激活一个按钮上的切换

Question

我从 bootstrap 中获取了这段代码：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)
  }
}

失去焦点实际上并没有改变任何按钮的按下状态，它只是失去了视觉焦点边框。

一次激活一个按钮上的切换

activate the toggle on one button at a time

javascript

vue.js

vue-component

vuejs2

bootstrap-vue