Как компонент Vue может щелкнуть кнопку или установить флажок, чтобы изменить текст всплывающей подсказки и цвет кнопки с помощью функции?

Question

Как компонент Vue может нажать кнопку или установить флажок, чтобы изменить текст всплывающей подсказки и цвет кнопки с помощью функции? В следующем коде эти действия обрабатываются функцией handle (), но текст всплывающей подсказки и цвет кнопки не обновляются.

Любая помощь будет принята с благодарностью.

The Vue компонент:

<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

Похоже, у вас есть опечатки в вашем компоненте. В этих атрибутах отсутствуют кавычки ="":

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

Просто попробуйте отобразить значения вне компонента кнопки и посмотреть, обновляются ли они при нажатии кнопки:

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