Vue 写侧边菜单遇到的问题

Question

在写侧边导航的时候遇到的问题：
如何点击一个菜单的时候，把其他的菜单折叠起来呢？

<ul>
    <li v-for="(item, index) in items">
        <div @click="showToggle(index,item)">{{ item.name }}</div>
        <ul v-show="item.isSubShow">
            <li v-for="subItem in item.subItems">
                <span>{{ subItem.name }}</span>
            </li>
        </ul>
    </li>
</ul>

js代码

export default{
        data(){
            return {
                items:[
                    {
                        name:'控制台',
                        isSubShow:false,
                    },
                    {
                        name:'用户管理',
                        isSubShow:false,
                        subItems:[
                            { name : '总代理' },
                            { name : '代理' },
                            { name : '用户' },
                            { name : '用户下级代理' },
                            { name : '在线用户' },
                            { name : '子账号' }
                        ]
                    },
                    {
                        name:'财务管理',
                        isSubShow:false,
                        subItems:[
                            { name : '充值记录' },
                            { name : '提款记录' },
                            { name : '资金明细' },
                            { name : '会员对账' },
                            { name : '代理对账' }
                        ]
                    }
                ]
            }
        },
        methods:{
            showToggle(index,item){
                item.isSubShow = !item.isSubShow
            }
        }
    }

如果点击菜单的时候 把其他的菜单收起来

Answer 1

自己解决了～