在自定义组列表组件中设置活动项

问题描述

编辑，这是我当前组件的一个代码笔： https://codepen.io/Gecko29/pen/XWdZPpj

我正在尝试使用vuetify列表组件在我的应用程序中创建类似结构的文件夹。我有一个像这样的对象：

listofItems = {item1 : {
                          expanded = true,subList = [item,item...]
                       },item2 : {....

我当前显示每个父项以及子列表项的代码可以在这里找到：

https://codepen.io/Gecko29/pen/XWdZPpj

这与显示的列表一起使用，并且能够切换包含列表项的隐藏和显示。

我现在希望能够将一个子列表项设置为活动状态。为此，我有一个存储活动子列表名称的变量。如果containingItem == activeItem，则希望该项目像被选中一样突出显示。实现这一目标的最佳方法是什么？

解决方法

最简单的方法是您可以将{{containsItem}}值包装在div或span中。然后检查条件是否将活动类添加到该div中。例如，我检查containsItem等于“ x”：

    <v-list-item-subtitle>
         <div :class="containingItem === 'x'? 'active': ''">{{containingItem}}</div>
    </v-list-item-subtitle>