change popover background color in bootstrap vue
Solution 1:
Ok, there are some issues with your code.
First, you should define the action column in your data in order to see the action column in your b-table.
Second, for different rows, you need to declare different id values. With this, when you click on different buttons you are calling different popovers, however, you just define one id and one target, so it is just working for the first row and not the others.
For your CSS problem, I just changed the color of the popover arrow and used !important to overwrite the bootstrap CSS style.
I prepare one snippet to show you how your code can improve.
new Vue({
el: '#app',
data() {
return {
val: '',
fields: [{
key: 'name',
label: 'Name',
sortable: true
},
{
key: 'id',
label: 'Id',
sortable: true
},
{
key: 'action',
label: ''
},
],
items: [{
name: 'Molly Holly',
id: '89214bhkjshf',
action: "action-1"
},
{
name: 'John doe',
id: '89214bhkjshf',
action: "action-2"
},
{
name: 'Bruce Wayne',
id: '89214bhkjshf',
action: "action-3"
},
{
name: 'Mike Brown',
id: '89214bhkjshf',
action: "action-4"
},
],
}
},
methods: {
hello(d) {
console.log(d);
},
},
mounted() {
}
}).my-popover-class {
background: black !important;
}
.my-popover-class .arrow::after {
border-left-color: black !important;
}
.my-popover-class .popover-body {
color: white;
}<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>
<div id="app">
<div>
<b-table :items="items" :fields="fields">
<template v-slot:cell(action)="data">
<b-button :id="`callToAction${data.index}`">click me</b-button>
<b-popover :target="`callToAction${data.index}`" triggers="click blur" custom-class="my-popover-class">
<div @click="hello(data.item)">Edit Key</div>
</b-popover>
</template>
</b-table>
</div>
</div>