VueJS課程條件

Question

我有一個菜單，我想知道是否有辦法添加一個班由兒童班條件。

例子：

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

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> 

---

同樣的邏輯也適用於你的第二種情況，但是你需要使用一種方法來代替計算屬性每個子菜單的打開狀態p軌道：

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>