vue.js - 如何使用多个按钮设置活动

Question

我有三个使用 v-for 在 div 中生成的按钮。当单击一个按钮时，我希望该特定按钮获取活动类以及先前活动的类以删除该类。我知道如何使用 v-bind 一键完成。但我只是不确定三个的逻辑。

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

我玩过 vuejs 的单选按钮切换，但是它非常缺乏我在按钮上需要的样式功能。

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

标签： vue.js

Answer 1

你可以使用你的current_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>