Soy bastante nuevo en vue.js y actualmente intento diseñar un elemento específico de un grupo de listas. Mi aplicación se divide en una navegación principal, un menú lateral y una sección de contenido principal. Al hacer clic en un elemento del grupo de la lista, supuestamente se resalta el elemento en el que se hizo clic y se cambia el contenido principal. Cambiar el contenido funciona bien, pero tengo problemas para diseñar el elemento en la lista. El código del componente para el menú lateral se ve así:

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

La matriz de 'elementos' de la que obtengo el elemento se almacena en la tienda vuex y acceder a todo funciona bien. Sé que puede configurar un elemento individual de un grupo de lista como "activo", pero como obtengo mis elementos de una matriz usando una construcción for-each, no pude averiguar cómo hacerlo en mi caso. Traté de usar una clase condicional como esta:

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

pero esto solo da como resultado que los elementos ni siquiera se muestren al iniciar la aplicación. ('currentItem' es el índice del elemento actualmente seleccionado que también se almacena en la tienda vuex). La clase 'selección de elementos' solo se usa para el estilo general de los elementos (funcionaba bien antes de agregar las condiciones) y, por lo tanto, está codificada como verdadera, la clase 'elemento activo' que quería usar para resaltar.

¿Tienen alguna sugerencia? ¿Me estoy perdiendo algo (trivial)?

editar:

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; }