Can anyone provide guidance on how to change the button color of a Vue component using a function while utilizing Bootstrap-vue? The code snippet below demonstrates how a tooltip can be altered through a function, but how can this concept be extended to modify the button color as well? Any assistance would be highly appreciated.
Below is the Vue component in question:
<template>
<div class="text-center">
<b-button v-b-tooltip.hover.right="tooltipText" variant="outline-primary" @click="userHandler(username)">
<div v-bind:class="{ active: checkbox1 }">
{{ username }}
</div>
</b-button>
</div>
</template>
<script>
import EventBus from '../eventBus.js'
export default {
props: ['username', 'checkbox1'],
data() {
return {
show: true,
tooltipTextContent: 'block',
}
},
methods {
userHandler(username) {
EventBus.$emit('handleUser', username);
},
tooltipText() {
if (!this.checkbox1) {
return this.tooltipTextContent
} else {
return `un${this.tooltipTextContent}`
}
}
},
}
</script>
<style scoped>
.active {
color: red;
}
</style>