Vue Bootstrap dropdown items color changing

Question

Hello I'm making a vertical menu with Vue Bootstrap 4

 <b-dropdown id="dropdown-dropright" no-caret dropright :text="result.title" variant="primary" class="drop"  v-for="result in resultsmenu.slice(0,4)" :key="result.id">
      <span  v-on:click="selectedEntry">
    <b-dropdown-item  class="slide-in-right"  v-for="submenu in result.submenu" :key="submenu"><nuxt-link  :prefetch="true" :to="submenu.slug">{{submenu.title}}</nuxt-link></b-dropdown-item>
      </span>
  </b-dropdown>

I'm trying to change the color of the dropdown-items like at first all the dropdown items are black color and if i clicked one of the items of the dropdown the other dropdown items become white color but the clicked one stay black color.

Hope someone have a way to help me Thank you

Answer 1

You can try to bind class to dropdown item :

new Vue({
  el: '#demo',
  data() {
    return {
      resultsmenu: [{id: 1, title: 'AAA', submenu: [{title: 'aaa', slug: ''}, {title: 'bbb', slug: ''},{title: 'ccc', slug: ''}]}],
      active: null
    }
  },
  methods: {
    selectedEntry(i) {
      this.active = i
    }
  }
})

.dark {
  background: black;
}
.light {
  background: white;
}

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
  <b-dropdown 
    id="dropdown-dropright" no-caret dropright 
    :text="result.title" 
    variant="primary" 
    class="drop"  
    v-for="result in resultsmenu" 
    :key="result.id"
  >
    <span>
      <b-dropdown-item  
        class="slide-in-right dark"  
        v-for="(submenu, i) in result.submenu" 
        :key="i"
        :class="i === active ? 'light' : ''"
        v-on:click="selectedEntry(i)"
      >
        <a :href="submenu.slug">{{submenu.title}}</a>
      </b-dropdown-item>
    </span>
  </b-dropdown>
</div>