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

【问题标题】：Show hidden div element inside V-for loop在 V-for 循环中显示隐藏的 div 元素
【发布时间】：2021-08-17 15:49:01
【问题描述】：

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

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

所以我需要通过 'this' 事件或按类别 id 的函数来创建动态函数

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

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

谢谢

【问题讨论】：

建议不要将v-if与v-for结合使用，而应使用computed值并过滤v-for值。

标签： vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

由于每个category 已经是一个对象，您可以将布尔标志设置为每个对象的属性，从而无需单独的方法。您说的是“切换”，所以我想您想再次单击以再次隐藏子类别。（您还需要将较低的 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。

【讨论】：