vue中，在循环中操作事件，如何控制元素展示隐藏

Question

 <template>
    <div>
        <div class="firstLeverContainer" v-for="menu in menus">
            <div class="firstLever close" @click="openOrLoadChild(menu)">
                <span class="title">{{menu.menuName}}</span>
                <span class="drop">
                    <i class="fa fa-angle-down"></i>
                </span>
            </div>
            <div class="secondAllLeverContainer" v-bind:class="{isShow:isShow}">
                <child-menu v-for="childMenu in childMenus"></child-menu>
            </div>
        </div>
    </div>
</template>

比如：我点击第一元素，所有的secondAllLeverContainer都展开了，因为isShow是全局的，如何做，才能只执行当前循环体的中的事件呢

Answer 1

看你需要的效果是什么的，1L的办法可以实现每一项的显示和隐藏的切换，就是可以同时显示多项，点击的时候只要把对应的isShow取反就可以；
如果是每次只显示一项的话，就可以直接定义一个全局变量记录当前显示项的下标或者数组中的ID等唯一性的标识

 <template>
    <div>
        <div class="firstLeverContainer" v-for="menu,index in menus">
            <div class="firstLever close" @click="openOrLoadChild(index)">
                <span class="title">{{menu.menuName}}</span>
                <span class="drop">
                    <i class="fa fa-angle-down"></i>
                </span>
            </div>
            <div class="secondAllLeverContainer" v-bind:class="{isShow:isShow===index}">
                <child-menu v-for="childMenu in childMenus"></child-menu>
            </div>
        </div>
    </div>
</template>

openOrLoadChild(index){
    this.isShow=index
}