Vue 寫側(cè)邊菜單遇到的問題

在寫側(cè)邊導(dǎo)航的時候遇到的問題：
如何點擊一個菜單的時候，把其他的菜單折疊起來呢？

<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:'財務(wù)管理',
                        isSubShow:false,
                        subItems:[
                            { name : '充值記錄' },
                            { name : '提款記錄' },
                            { name : '資金明細(xì)' },
                            { name : '會員對賬' },
                            { name : '代理對賬' }
                        ]
                    }
                ]
            }
        },
        methods:{
            showToggle(index,item){
                item.isSubShow = !item.isSubShow
            }
        }
    }

如果點擊菜單的時候 把其他的菜單收起來