javascript - 一次激活一个按钮的切换

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.
简而言之，只有一个按钮必须处于活动状态，不再有。
这似乎是一件容易的事情，问题出现了，因为单击组件有一个焦点，当您单击屏幕上的其他任何位置时，它就会消失，因此并不是真正的活动。

标签： javascriptvue.jsvuejs2vue-componentbootstrap-vue

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

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