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

Question

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>

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>