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>
解决方案
看起来您的组件中有拼写错误。这些属性缺少引号=""
:
<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>
推荐阅读
- java - 如何创建弹出消息以提醒用户字段不完整?
- java - 如何使用比较器
作为通用 SortedDoublyLinkedList 中的参数 - java - 如果鼠标正在移动,则重新启动计时器
- polymer - 什么是 Polymer 3 中纸质菜单和纸质子菜单的正确替换?
- python - 动态制作文件名时不理解此字符串连接错误
- ios - 在 Swift 中将单词转换为数字
- c# - 打印一个 DB 表的所有列,而不在打印语句中写入每个列名
- c - 为什么我的二维数组打印出不正确的值?
- css - 在容器上延伸行但将其他内容保留在容器内
- python - 使用 pd.Dataframe.replace 和 apply 函数作为替换值