Vuejs2 Vue js将列表中的项目

我想创建一个侧菜单栏。当应该显示

li

时，我添加了一个类

show

但在我的例子中，当显示一个项目（第一个）并单击下一个项目（第二个）时，第一个项目会折叠（这很好），但第二个项目不会立即显示

newvue({
el:“#应用程序”，
方法：{
setActiveItemId（itemIndex）{
this.activeItemId=itemIndex
this.isActive=！this.isActive
}
},
数据：{
消息：“您好，Vue.js！”，
I：错，
activeItemId:“”，
侧栏：[{
名称：“仪表板”，
url:“/dashboard”，
图标：“ti世界”，
儿童：[{
名称：“按钮”，
url:“/组件/按钮”，
图标：“法宝书”，
},
{
名称：“社交按钮”，
url:“/组件/社交按钮”，
图标：“图标拼图”，
}
]
},
{
名称：“组件”，
url:“/components”，
图标：“ti铅笔alt”，
儿童：[{
名称：“按钮”，
url:“/组件/按钮”，
图标：“法宝书”，
},
{
名称：“社交按钮”，
url:“/组件/社交按钮”，
图标：“图标拼图”，
}
]
}
]
}
})

.collapse.show{
显示：块；
}
.崩溃{
显示：无；
}
。未设置样式的列表{
左侧填充：0；
列表样式：无；
}
.collapse.list-未设置样式{
左侧填充：15px；
}

家


{{x.name}


{{y.name}

问题在于，在

setActiveItemId

方法中，无论激活的是哪个项目，您总是切换

isActive

状态。这意味着它切换相同的项目，但当跳转到另一个项目时，您必须单击两次。我会采用另一种方法，其中，

isActive

是一个计算属性，而不是驻留在数据中

// ...
methods: {
    setActiveItemId(itemIndex) {
        // If item is currently selected, toggle
        if (itemIndex === this.activeItemId) {
            this.activeItemId = ''
            return
        }
        this.activeItemId = itemIndex
    }
},
computed: {
    isActive () {
        return this.activeItemId !== ''
    }
}

以下是最新的小提琴：

---

不相关但值得注意的是：请记住，您的

数据必须是返回数据对象的函数，而不是对象本身。
您的答案很好，但现在我遇到的问题是，在崩溃过程中，它看起来非常强大，或者我当前的css看起来有些奇怪。这可能是CSS的问题，而不是Vue的问题。您可以更新小提琴，以便我们了解发生了什么，或者创建另一个问题，因为它可能与原始问题无关。我添加了一个问题：