How can a Vue component click a button or check a checkbox to change tooltip text and button color using a function?

Question

How can a Vue component click a button or check a checkbox to change tooltip text and button color using a function? In the following code, these actions are being handled by the handle() function, but the tooltip text and button color are not being updated.

Any help would be greatly appreciated.

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>

Answer 1

It looks like you have typos in your component. Those attributes are missing quotes ="" :

<b-button 
  v-bind:v-b-tooltip.hover.right="tooltipText" 
  v-bind:variant="color"  
  @click="handler(state)"
>
  {{ username }}
</b-button> 

Just try to display the values outside of the button component and see if they update when you press the button:

<div>
  {{tooltipText}}
  {{variant}} 
  {{color}}
</div>