vue 一级导航控制二级导航的显隐,第一个列表默认展开，其他列表收缩

Question

这是父组件

  <ul>
      <sidebar-item  v-for="(menuItem,index) in sideList"
                     :item="menuItem"
                     :index="index"
                    ></sidebar-item>

    </ul>

这是item子组件

<template>
    <li class="ti-25">
      <div v-if="index==0?open=false:open=true">
    <a href="javascript:;" @click="showBtn" class="side-title bor mt-1">
      <i class="icon-open"></i>
    {{item.menuName}}
    </a>
    <ol v-show="open">
    <li class="active">
    <router-link :class="[index==0?'button':'button2']" v-for="(itemChildren,index) in item.children"
   class="child-title" :to="'/'+itemChildren.path">
      <i class="icon-spot"></i>
      {{itemChildren.menuName}}
    </router-link>
    </li>
    </ol>
        </div>
    </li>

</template>

//js
     return {
                open:false,
            }
        },
        props:{
            item:Object,
            index:Number,
        },
        components: {},
        methods: {
            showBtn(){
                this.open=!this.open;
            }
        },

Answer 1

直接用v-show判断是否打开：

<template>
<li class="ti-25">
    <a href="javascript:;" @click="showBtn" class="side-title bor mt-1">
        <i class="icon-open"></i>
        {{item.menuName}}
    </a>
    <ol v-show="open">
        <li class="active">
            <router-link class="button2" :class="{0:'button'}[index]" v-for="(itemChildren, childIndex) in item.children" class="child-title" :to="'/' + itemChildren.path">
                <i class="icon-spot"></i>
                {{itemChildren.menuName}}
            </router-link>
        </li>
    </ol>
</li>
</template>

JS

return {
    open: !this.index || false,

},

另外你的router-link中的index和传入的属性index重名，会在v-for循环覆盖掉属性index的，我已经改成了childIndex。