VueJS 类条件

Question

我有一个菜单，我想知道是否可以通过子类条件添加一个类。

例子：

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

我想提出条件：如果 li

内部有“active”类，则为“open”类

@编辑

Navigation.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>

我的菜单是由这个本地对象生成的，Routes 和“Active”类运行良好。我想将条件放在“ul”标签内的“open”类中。

@最终编辑 - 解决方案

我已经创建了第二种方法来检查第三级页面是否打开，检查第二级的所有子菜单以打开它。

    *<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>*

Answer 1

我会简单地创建一个计算属性来检查 list 数据中是否存在具有匹配路由名称的项目：

computed: {
  isOpen() {
    return this.list.find((i) => this.$route.name === i.routeName)
  }
}

改用它：

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

---

同样的逻辑适用于您的第二种情况，但您需要使用方法而不是计算属性来跟踪每个子菜单的打开状态：

methods: {
  isOpen(list) {
    return list.find((i) => this.$route.name === i.KeyRouter);
  }
}

将子菜单传递给方法，如下所示：

<ul 
  class="nav nav-third-level" 
  v-if="item.SubMenu != null" 
  :class="{ 'open' : isOpen(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>