在 V-for 循环中显示隐藏的 div 元素

Question

我是 Vue 的初学者

例如，我有一个数组列表（类别和子类别）

<ul v-for="category in categories">
    <li class="categories" v-on:click="subcategorieshidden = false">
      {{category.name}}
      <ul class="subcategories" v-if="!subcategorieshidden" v-for="subcategory in category.subcategories">
        <li>{{subcategory.name}}</li>
      </ul>
    </li>
  </ul>

在这种情况下，显示 function 仅适用于第一类

所以我需要通过“this”事件或 function 通过类别 ID 制作动态 function

例如，如果我们单击第二个类别，那么它必须切换第二个类别的子类别

我可以制作 v-on:click="showsubcat(subcategoryId)"，但我不知道如何在 vue 中显示 showsubcat function

谢谢

Answer 1

由于每个category已经是 object，因此您可以将 boolean 标志设置为每个对象的属性，从而无需单独的方法。 您说的是“切换”，所以我想您想再次单击以再次隐藏子类别。 （您还需要将较低的v-for向下移动到它所属的<li> 。）这就是所有的样子：

<ul v-for="category in categories">
    <li class="categories" v-on:click="category.subcategoriesHidden = !category.subcategoriesHidden">
        {{category.name}}
        <ul class="subcategories" v-if="!category.subcategoriesHidden">
            <li v-for="subcategory in category.subcategories">{{subcategory.name}}</li>
        </ul>
    </li>
</ul>

如果您希望默认隐藏所有类别的子类别，请反转逻辑以使字段为subcategoriesShown 。