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>

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

1 个答案: