我有一个菜单，我想知道是否有办法添加 Class by Children类条件。
示例：
<ul :class="{ 'open' : ThereIsClassInChild }">
<li v-for="item in list" :class="{ 'active' : $route.name == item.routeName }">
<a>{{ item.name }}</a>
</li>
</ul>
我想提出条件：＆＃34; 打开＆＃34;如果有＆＃34; 有效＆＃34; li
中的课程
@Edit
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>
我的菜单会生成此本地对象，路线和类＆＃34; 有效＆＃34;效果很好。我想把条件放到＆＃34; 打开＆＃34;内部课程＆＃34; ul ＆＃34;标签
@FINAL编辑 - 解决方案
我创建了第二种方法来检查第三级页面是否打开，检查第二级别的所有子菜单以打开它。
*<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>*
答案 0 :(得分：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>