一次激活一個按鈕的切換

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

失去焦點實際上並沒有改變任何按鈕的按下 state，它只會失去視覺焦點邊框。