Как сделать v-if для v-if?

Question

Не могу понять , к чему мне надо присвоить v-if , что бы когда я выбрал пункт Admin, затем нажал на пункт Inf у меня скрылось меню что было открыто раньше ,а именно Inf Make Give Ban и появилось новое , у меня этот новый блок убирает тот список раньше и не отображается , как это исправить ?

new Vue({
   el: '#app',
   data() {
     return {
      activeKey: 'admins',
     }
   }
 });

.header {
   height: 8.34vh;
   width: 100%;
   background: rgba(0, 0, 0, 0.75);
   display: flex;
}

.wrapper {
   display: flex;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%);
}

.list {
   width: 100vw;
   display: flex;
   justify-content: space-around;
}

.list-item {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   font-size: 15px;
   line-height: 29px;
   display: flex;
   align-items: center;
   justify-content: center;
   letter-spacing: -0.04em;
   color: #FFFFFF;
   text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.35);
   cursor: pointer;
   &:hover {
      background: radial-gradient(50% 89.76% at 50% 100%, #2992FE 0%, rgba(41, 138, 238, 0) 100%);
   } 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
      <div class="header">
         <ul class="list">
            <li class="list-item" v-on:click="activeKey =  'statsshow'">Stats</li>
            <li class="list-item" v-on:click="activeKey = 'works'">Work</li>
            <li class="list-item" v-on:click="activeKey = 'requests'">Request</li>
            <li class="list-item" v-on:click="activeKey = 'admins'">Admin</li>
         </ul>
      </div>
      <div class="wrapper">
         <div class="stats" v-if="activeKey == 'statsshow'">
            11
         </div>
         <div class="work" v-else-if="activeKey == 'works'"> 
               12
         </div>
         <div class="request" v-else-if="activeKey == 'requests'">
              13
         </div>
         <div class="administrator" v-else-if="activeKey == 'admins'">
            <div class="head-admin">
               Адміністрація
            </div>
            <div class="main-admin">
               <div class="blocks">
                  <button class="admin-buttons" v-on:click="activeKey = 'adm'">Inf</button>
               </div>
               <div class="blocks">
                  <button class="admin-buttons">Give</button>
               </div>
               <div class="blocks">
                  <button class="admin-buttons">Ban</button>
               </div>
               <div class="blocks">
                  <button class="admin-buttons">Make</button>
               </div>
            </div>
            <div class="find-player" v-else-if="activeKey == 'adm'">
               <div class="find-player__head">
                  Fin person
               </div>
               <div class="find-player__main">
                  1111111111111111111111
               </div>
            </div>
         </div>
      </div>
   </div>

БЛОГ НА HUSL

Как сделать v-if для v-if?

Ответы (0 шт):