vue.js - 如何使 li 项目在 Vue 的侧边栏中处于活动状态

Question

我是 Vue 的新手，我想制作一个侧边栏：

<template>
        <div class="sidebar">
            <a @click="clickSidebar" :class="isActive ? 'active' : ''" href="#tickets">Tickets</a>
            <a @click="clickSidebar" :class="isActive ? 'active' : ''" href="#account-details">Account Details</a>
            <a @click="clickSidebar" :class="isActive ? 'active' : ''" href="#addresses">Addresses</a>
            <a @click="clickSidebar" :class="isActive ? 'active' : ''" href="#downloads">Downloads</a>
        </div>

</template>
<script>
    export default {
        data(){
            return {
                isActive: true
            }
        },
        methods: {
            clickSidebar() {
                this.isActive = !this.isActive;
            }
        }
    }
</script>

所以我想要实现的目标是，作为默认值，我想将#tickets 的类设置为活动状态，并且正如您可以想象的那样，每当它被点击到另一个 a href 时，我希望它在前一个是活动的和非活动的。所以我试图做一些合乎逻辑的事情。如果你能给我任何想法，我会很高兴的。

标签： vue.jsvuejs2clickvue-class-components