Javascript Vue组件如何单击按钮或选中复选框以使用函数更改工具提示文本和按钮颜色？

Vue组件如何单击按钮或选中复选框以使用函数更改工具提示文本和按钮颜色？ 在下面的代码中，这些操作由handle（）函数处理，但是工具提示文本和按钮颜色没有更新

任何帮助都将不胜感激

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>

{{username}}
从“../EventBus.js”导入EventBus
导出默认值{
道具：['username'，'checkbox1']，
数据（）{
返回{
tooltipText:null，
颜色：空，
用户：null，
状态：空，
用户：this.username
}      
},
方法：{
处理程序（bool）{
如果（！this.state==null）{
this.state=！this.state
}
如果（！this.bool）{
EventBus.$emit（'handleUser'，this.user）
this.color='outline success'
this.state=false
this.tooltipText='block'
返回
}否则{
EventBus.$emit（'handleUser'，this.user）
this.color=‘轮廓危险’
this.tooltipText='unblock'
this.state=true
返回
}
},
},
创建（）{
this.handler（this.checkbox1）；
},
观察：{
复选框1（）{
this.handler（this.checkbox1）
}
},
} 
.主动{
颜色：红色；
}

看起来您的组件中有打字错误。这些属性缺少引号

=“”

：

{{username}}

只需尝试显示按钮组件外部的值，并查看按下按钮时这些值是否更新：

{{tooltipText}}
{{variant}}
{{color}}

我猜想它不会更新数据属性，因为

if/else

处理程序（）中的那些

if/else

条件从未运行过。在函数的开头调用

console.log（bool）

，然后根据

console.log（bool）

在

handler（）的开头按下按钮，查看它得到的值。