Here is a snippet of code I found on Bootstrap's website:
<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>
I want to modify the toggle functionality so that only one button can be active at a time. When you click on a button, it should become true, but if there are others already set as true, they should become false. In other words, only one button should be active. However, I'm facing an issue where the focus shifts away when clicking elsewhere on the screen, making the toggling not as effective.