当我点击一个类别时，所有类别的子类别都会显示

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

您正在使用一个 isActive 来控制所有 v-show 设置

如果您想要类别和子类别之间的一对一映射，您需要

一个isActive=[]的数组（这样可以一次扩展多个东西），


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

或特定作业@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>

Answer 2

首先将嵌套的 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>

当我点击一个类别时，所有类别的子类别都会显示

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

javascript

events

vue.js

v-for