1
votes

I'm fairly new to vue.js and currently trying to style a specific item of a list group. My application is separated into a main nav, a side menu and a main content section. Clicking on an item in the list group supposedly highlights the clicked item and changes the main content. Changing the content works fine but I'm struggling with styling the item in the list. The code of the component for the side menu looks like this:

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

The 'items' array i'm getting the item from is stored in the vuex store and accessing everything works fine. I know you can set an individual item of a list group to "active", but since I'm getting my items from an array using a for-each construction, I could not figure out how to do that in my case. I tried to use a conditional class like this:

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

but this just results in the items not even showing when starting the application. ('currentItem' is the index of the currently selected item which is also stored in the vuex store). The class 'item-selection' is just used for the general styling of the items (worked fine before adding the conditions) and is therefore hard coded true, the 'active-item' class I wanted to use for the highlighting.

Do you guys have any suggestions? Am I missing something (trivial)?

edit:

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;
}
What is the on click function? @click="????".Erenn
Hi, would you mind create a minimal reproducible example so it's easier for us to examine and give suggestion for you?Huy Phạm
@Erenn The function called when an item is clicked looks as follows selectContent(item){ this.$store.commit('setCurrentItem', item); } It basically just changes the currently selected item stored in the vuex store. It's used to change the main content which works fine.Naumi
@HuyPham I tried to break it down into a minimal example and edited it. Thank you for the suggestion!Naumi