Vue.js 如何使用多个按钮设置活动状态

我有三个按钮是使用v-for在div中生成的。当一个按钮被点击时，我希望这个特定的按钮可以得到一个活动的类，以及一个以前是活动的类来删除这个类。我知道如何用带一个按钮的v-bind来完成。但我只是不确定三个人的逻辑

我想有三个IsActiveButton1、IsActiveButton2和IsActiveButton3。然后尝试将类绑定到这些。但是由于我使用v-for，我不知道如何告诉它绑定到哪个活动。我也觉得有一种更有效的方法

我已经玩了很多，但它非常缺乏的造型能力，我需要的按钮

<template>
    <div id="basemap_container">
        <button v-for="option in options" 
            :key="option.value" 
            :class="option.class"
            @click="UpdateBaseMap(option.value)"
        >{{option.text}}
        </button> 
        <button 
            id="collapse_basemap" 
            class="btn_group_basemap"
            @click="CollapseBaseMap()"
            >»
        </button>
    </div>

</template>

<script>

export default {
    name:"BaseMapToggle",
    data(){
        return{
         current_basemap: "streets",
         basemap_changer_active: true,
        options:[
                {text: "satellite", value:"satellite",class: "btn_group_basemap"},
                {text: "topo", value:"topo",class: "btn_group_basemap"},
                {text: "streets", value:"streets",class: "btn_group_basemap active"}
            ]
        }
    },
    methods:{
        UpdateBaseMap(value)
        {
            this.current_basemap = value;
            this.$store.commit('UpdateBaseMap',this.current_basemap);
        },

        CollapseBaseMap()
        {
            this.basemap_changer_active = !this.basemap_changer_active;
            const changer = document.querySelector("#collapse_basemap");
        }
    }
}
</script>

{{option.text}
»
导出默认值{
名称：“BaseMapToggle”，
数据（）{
返回{
当前基本地图：“街道”，
basemap_changer_active:真，
选项：[
{文本：“卫星”，值：“卫星”，类：“btn_组基础图”}，
{文本：“topo”，值：“topo”，类：“btn_group_basemap”}，
{文本：“streets”，值：“streets”，类：“btn_group_basemap active”}
]
}
},
方法：{
UpdateBaseMap（值）
{
this.current_basemap=值；
this.$store.commit（'UpdateBaseMap'，this.current_basemap）；
},
CollapseBaseMap（）
{
this.basemap\u changer\u active=！this.basemap\u changer\u active；
const changer=document.querySelector（“#collapse_basemap”）；
}
}
}

---

您可以使用

当前的\u basemap

变量执行此操作：

<button v-for="option in options" 
  :key="option.value" 
  :class="option.class + `${option.value === current_basemap ? ' active ' : ''}`"
  @click="UpdateBaseMap(option.value)">
  {{option.text}}
</button> 

{{option.text}