VueJS类条件

我有一份菜单,我想知道是否有办法添加

例子:

<ul :class="{ 'open' : ThereIsClassInChild }">
    <li v-for="item in list" :class="{ 'active' : $route.name == item.routeName }">
          <a>{{ item.name }}</a>
    </li>
</ul>

我想提出一个条件: “如果有,请分类” 忙碌的 “类内部

@编辑

航行vue

<template>
<router-link v-for="item in Menu" :to="{ name: item.KeyRouter }" tag="li" :class="{'active' : $route.name === item.KeyRouter }">
    <a>{{item.Name}}</a>
    <ul class="nav nav-second-level" v-if="item.SubMenu != null" :class="{ 'open' : isOpenComputed(item.SubMenu) }">
        <router-link :to="{ name: SecondItem.KeyRouter }" tag="li" v-for="SecondItem in item.SubMenu" :class="{ 'active': $route.name === SecondItem.KeyRouter }">
            <a>{{SecondItem.Name}}</a>
        <ul class="nav nav-third-level" v-if="SecondItem.SubMenu != null" :class="{ 'open' : isOpenComputedTwo(SecondItem.SubMenu) }">
            <router-link :to="{ name: ThirdItem.KeyRouter }" tag="li" v-for="ThirdItem in SecondItem.SubMenu" :class="{ 'active': $route.name === ThirdItem.KeyRouter }">
                <a>{{ThirdItem.Name}}</a>
            </router-link>
        </ul>
        </router-link>
    </ul>
</router-link>
</template>

<script>

let once = true
let onceTwo = true

export default {
    data: () => ({
        Menu: []
    }),
    methods: {
        isOpenComputed (Menu) {
            if(Menu === true) {
                console.log( "Menu Router 1 [ FORCED TRUE ]" )
                return true
                }
            if(once){
            console.log( "Menu Router 1 START" )
            if(Menu.find( ( i ) => this.$route.name === i.KeyRouter ) != null){
                console.log( "Menu Router 1 [ TRUE ]" )
                once = false
                return true
            } 
            console.log( "Menu Router 1 [ FALSE ]" )
        }
        },
        isOpenComputedTwo (Menu) {
            if(onceTwo){
            console.log( "Menu Router 2 [ START ]" )
            if(Menu.find( ( i ) => this.$route.name === i.KeyRouter ) != null){
            console.log( "Menu Router 2 [ TRUE ] " )
                this.isOpenComputed(true)
                onceTwo = false
                return true
            } 
            console.log( "Menu Router 2 [ FALSE ]" )
        }
        }
    },
    created() {
        let Data = [{
                "Name": "Menu 1",
                "SubMenu": [{
                    "Name": "SubMenu 1-1",
                    "KeyRouter": "Produtos"
                }]
            },
            {
                "Name": "Menu 2",
                "SubMenu": [{
                    "Name": "SubMenu 2-1",
                    "SubMenu": [{
                        "Name": "Third Page Test",
                        "KeyRouter": "PagTeste"
                    }, {

                        "Id": 5,
                        "Name": "Third Page Test 2",
                        "KeyRouter": "PagTesteTres"
                    }]
                }]
            }
        ]
        this.Menu = Data;
    }
}
</script>

我的菜单是由这个本地对象生成的 忙碌的 打开 “内部类” “标签。

@最终编辑-解决方案

    *<template>

    <router-link v-for="item in Menu" :to="{ name: item.KeyRouter }" tag="li" :class="{'active' : $route.name === item.KeyRouter }" :key="item.Id">
        <a>{{item.Name}}</a>
        <ul class="nav nav-second-level" v-if="item.SubMenu != null" :class="{ 'in' : isOpenComputedTwo(item.SubMenu) }">
            <router-link :to="{ name: SecondItem.KeyRouter }" tag="li" v-for="SecondItem in item.SubMenu" :class="{ 'active': $route.name === SecondItem.KeyRouter }" :key="item.Id">
                <a>{{SecondItem.Name}}</a>
            <ul class="nav nav-third-level" v-if="SecondItem.SubMenu != null" :class="{ 'in' : isOpenComputed(SecondItem.SubMenu) }">
                <router-link :to="{ name: ThirdItem.KeyRouter }"  tag="li" v-for="ThirdItem in SecondItem.SubMenu" :class="{ 'active': $route.name === ThirdItem.KeyRouter }" :key="item.Id"> 
                    <a>{{ThirdItem.Name}}</a>
                </router-link>
            </ul>
            </router-link>
        </ul>
    </router-link>

    </template>

    <script>

    let once = true
    let onceTwo = true

    export default{
    data: () => ({
       Menu: []
    )},
    methods: {
    isOpenComputed (Menu) {

        if(once){
        //console.log( "Menu Router 1 START" )
        if(Menu.find( ( i ) => this.$route.name === i.KeyRouter ) != undefined){
            console.log( "Menu Router 1 [ TRUE ]" )
            once = false
            return true
        } 
        //console.log( "Menu Router 1 [ FALSE ]" )
    } else return false

    },

    isOpenComputedTwo (Menu) {
        if(onceTwo){
        let a = false;

        if(Menu.find( ( i ) => this.$route.name === i.KeyRouter ) != null){
            onceTwo = false
            return true
        } 

        let getSubMenu = []

        if(Menu.find( ( i ) =>  i.SubMenu != undefined )) {
            Menu.find( ( i ) => { 
                getSubMenu = i.SubMenu
                for(i = 0 ; getSubMenu.length > i ; i++){
                if( getSubMenu[i].KeyRouter === this.$route.name ){
                    onceTwo = false
                    a = true;

                }
                }
            } ) 
        }
        if(a){
            return true
        }

    } else return false
    },
created() {
let Data = [{
                    "Name": "Menu 1",
                    "SubMenu": [{
                        "Name": "Página 1",
                        "KeyRouter": "Produtos"
                    }]
                },
                {
                    "Name": "Menu 2",
                    "SubMenu": [{
                        "Name": "SubMenu 2",
                        "SubMenu": [{
                            "Name": "Página 2",
                            "KeyRouter": "PaginaDois"
                        }, {
                            "Name": "Pagina 22",
                            "KeyRouter": "PaginaDoisDois"
                        }]
                    },
                    {
                        "Name": "SubMenu 3",
                        "SubMenu": [{
                            "Name": "Página 3",
                            "KeyRouter": "PaginaTres"
                        }, {
                            "Name": "Pagina 3",
                            "KeyRouter": "PaginaTresTres"
                        }]
                    },
                    ]
                }
            ]
            this.Menu = Data;
        }
    }
    </script>*