小编Bel*_*dak的帖子

我有两列布局。左列有一个堆叠的菜单，当用户选择一个选项时，内容将显示在右边。active在所选菜单链接上设置类的最佳方法是什么？

我在下面提出了一个解决方案，但这似乎有些冗长。每个菜单项都有一个基于条件的类分配data.activeTab。点击事件处理程序会更新的值data.activeTab。

<template>
    <div>
        <div class="row">
            <div class="col-md-3">
                <ul class="nav nav-pills nav-stacked">
                    <li role="presentation" :class="{active : activeTab == 'option1'}">
                        <a :href="'/#/sales/' + uuid + '/option1'" @click="updateMenu">Option 1</a>
                    </li>
                    <li role="presentation" :class="{active : activeTab == 'option2'}">
                        <a :href="'/#/sales/' + uuid + '/option2'" @click="updateMenu">Option 2</a>
                    </li>
                </ul> 
            </div>
            <div class="col-md-9">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data : function () {
            return {
                activeTab : 'option1'
            }
        },
        props : [
            'uuid'
        ], …