0
我有一個菜單,我想知道是否有辦法添加一個班由兒童班條件。VueJS課程條件
例子:
<ul :class="{ 'open' : ThereIsClassInChild }">
<li v-for="item in list" :class="{ 'active' : $route.name == item.routeName }">
<a>{{ item.name }}</a>
</li>
</ul>
我想提出的條件: 「開放」 類,如果有 「活躍」 類中李
@編輯
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>
我的菜單生成此本地對象中,路線和類 「活動」 效果很好。我想在「ul」標籤裏面加上「open」類的標籤。
@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>*
尼斯回答! @thanksd謝謝!但你能解決我的第二個問題嗎?我忘了放在這裏! =) – Johnson
我不明白爲什麼這種解決方案不適用於您的第二種情況,因爲只有模板發生了變化。 – thanksd
嗯,我在這裏嘗試,並返回給我:[Vue警告]:屬性或方法「isOpen」沒有在實例上定義,但在渲染過程中引用。確保在數據選項中聲明反應數據屬性。 – Johnson