在 <b-list-group> (vue.js) 中设置活动项目的样式

Question

我对 vue.js 还很陌生，目前正在尝试为列表组的特定项目设置样式。我的应用程序分为主导航、侧边菜单和主要内容部分。单击列表组中的项目应该会突出显示单击的项目并更改主要内容。更改内容效果很好，但我正在努力为列表中的项目设置样式。侧边菜单的组件代码如下所示：

<div id="app">
<div>
    <b-list-group>
        <b-list-group-item 
            v-for="item in this.items" 
            v-on:click="selectItem(item.id)"
            :key="item.id" 
            class="item-selection">
                {{item.title}}
        </b-list-group-item>
    </b-list-group>
</div>
</div>

我从中获取项目的“项目”数组存储在 vuex 存储中，并且访问一切正常。我知道您可以将列表组的单个项目设置为“活动”，但是由于我使用 for-each 构造从数组中获取项目，因此我无法弄清楚在我的情况下如何做到这一点。我尝试使用这样的条件类：

v-bind:class="{'item-selection':true, 'active-item':(item.id === this.currentItem)}"

但这只会导致启动应用程序时项目甚至不显示。 （'currentItem' 是当前选中项的索引，它也存储在 vuex 存储中）。 'item-selection' 类仅用于项目的一般样式（在添加条件之前工作正常），因此硬编码为 true，即我想用于突出显示的 'active-item' 类。

大家有什么建议吗？我错过了什么（微不足道的）吗？

编辑：

javascript：

new Vue({
  el: '#app',
  data: {
    items :[
      {id: 0,
       title: 'first item'},
       {id: 1,
       title: 'second item'},
       {id: 2,
       title: 'third item'}
    ],
    currentItem : 0
  },
  methods: {
    selectItem(id){
      currentItem = id;
    }
  }
})

css:

.item-selection:hover{
  color: black;
  cursor: pointer;
  background: #ebebeb;
}

.item-selection{
  background-color: #ffffff;
}

.active-item{
  background-color: #444444;
}

Answer 1

v-bind:class="{'item-selection':true, 'active-item': item.id === currentItem}"


methods: {
  selectItem(id){
    this.currentItem = id;
  }
}