[Vuejs]-When I click on one category, subcategores for all categories are showing

by

0👍

✅

You are using one isActive to controll all the v-show settings

If you want a 1-to-1 mapping between category and subcategory you will either need to have

  • an array of isActive=[] (so multiple things can be expanded at once),

        <ul class="navbar-nav mr-auto"
            v-for="(categor, index) in categors">                
            <li @click="isActive[index] = !isActive[index]">
                <button >{{categor.kategorija}}</button>
            </li>
            <ul
                 v-show="isActive[index]"
                v-for="children in categor.children">
                <li v-text="children.kategorija"></li>                                          
            </ul>
        </ul>
  • or a specific assignment @click="isActive=categor" (if you want to only expand one sublist at a time)
        <ul class="navbar-nav mr-auto"
            v-for="categor in categors">                
            <li @click="isActive = categor">
                <button >{{categor.kategorija}}</button>
            </li>
            <ul
                 v-show="isActive==categor"
                v-for="children in categor.children">
                <li v-text="children.kategorija"></li>                                          
            </ul>
        </ul>

0👍

At first put your nested ul into li like this:

<ul class="navbar-nav mr-auto"
    v-for="categor in categors">                
    <li @click="isActive = !isActive">
        <button >{{categor.kategorija}}</button>
        <ul
            v-show="isActive"
            v-for="children in categor.children">
            <li v-text="children.kategorija"></li>                                          
        </ul>
    </li>
</ul>

Leave a comment