Is it possible for a Vue component to trigger button clicks or checkbox checks in order to update tooltip text and button color using a function? Despite the presence of a handle() function in the code provided, these changes are not currently taking effect.
Any assistance on this matter would be highly appreciated.
Here's the Vue component:
<template>
<div class="text-center">
<b-button v-bind:v-b-tooltip.hover.right=tooltipText v-bind:variant=color @click="handler(state)">
{{ username }}
</b-button>
</div>
</template>
<script>
import EventBus from '../eventBus.js'
export default {
props: ['username', 'checkbox1'],
data() {
return {
tooltipText: null,
color: null,
user: null,
state: null,
user: this.username
}
},
methods: {
handler(bool) {
if (!this.state == null){
this.state = !this.state
}
if (!this.bool){
EventBus.$emit('handleUser', this.user)
this.color = 'outline-sucess'
this.state = false
this.tooltipText = 'block'
return
} else {
EventBus.$emit('handleUser', this.user)
this.color = 'outline-danger'
this.tooltipText = 'unblock'
this.state = true
return
}
},
},
created() {
this.handler(this.checkbox1);
},
watch: {
checkbox1() {
this.handler(this.checkbox1)
}
},
}
</script>
<style scoped>
.active {
color: red;
}
</style>