when I click on one category, subcategores for all categories are showing

Question

I have v-for in v-for becouse child subcategory. I have problem when I click on one category, subcategores for all categories are showing...

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

In script i have this code

isActive: false,
children: {
    id: '',
    kategorija: '',
    p_id: ''
},
categor: {
    id: '',
    kategorija: '',
    p_id: ''
},

Answer 1

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>