When I click on "Toggle", all lists appear, and I only need the list of child elements that I clicked on the parent.

new Vue({ el: '.demo', data: { show: true } }) 
 .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active до версии 2.1.8 */ { opacity: 0; } .menu { background-color: lightgreen; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div class="demo"> <ul> <li class="menu" @click="show = !show">Переключить <transition name="fade"> <ol v-if="show"> <li>Первый</li> <li>Второй</li> <li>Третий</li> </ol> </transition> </li> <li class="menu" @click="show = !show">Переключить <transition name="fade"> <ol v-if="show"> <li>Четвёртый</li> <li>Пятый</li> <li>Шестой</li> </ol> </transition> </li> <li class="menu" @click="show = !show">Переключить <transition name="fade"> <ol v-if="show"> <li>Седьмой</li> <li>Восьмой</li> <li>Девятый</li> </ol> </transition> </li> </ul> </div>

    1 answer 1

    Just to each parent I assign different values ​​of show in data: show1, show2, show3.

     new Vue({ el: '.demo', data: { show1: true, show2: true, show3: true } }) 
     .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active до версии 2.1.8 */ { opacity: 0; } .menu { background-color: lightgreen; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div class="demo"> <ul> <li class="menu" @click="show1 = !show1">Переключить <transition name="fade"> <ol v-if="show1"> <li>Первый</li> <li>Второй</li> <li>Третий</li> </ol> </transition> </li> <li class="menu" @click="show2 = !show2">Переключить <transition name="fade"> <ol v-if="show2"> <li>Четвёртый</li> <li>Пятый</li> <li>Шестой</li> </ol> </transition> </li> <li class="menu" @click="show3 = !show3">Переключить <transition name="fade"> <ol v-if="show3"> <li>Седьмой</li> <li>Восьмой</li> <li>Девятый</li> </ol> </transition> </li> </ul> </div>

    • The option is good, but unless these lists are generated and their number is known in advance. - Rustam Gimranov
    • @RustamGimranov, quarrel) Removed the claim) - Dmytryk