Vue Bootstrap dropdown items color changing - css

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>