когда я нажимаю на одну категорию, подкатегории для всех категорий отображаются

Question

У меня есть v-for в v-for, потому что это дочерняя подкатегория. У меня проблема, когда я нажимаю на одну категорию, подкатегории для всех категорий отображаются ...

<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>

В скрипте у меня есть этот код

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

Answer 1

Сначала поместите вложенный ul в li следующим образом:

<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> 

Answer 2

Вы используете один isActive для управления всеми настройками v-show.

. Если вы хотите отобразить соотношение 1: 1 между категорией и подкатегорией, вам потребуется либо

        <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>

• или конкретное c назначение @click="isActive=categor" (если вы хотите только расширить по одному подсписку за раз)

        <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>