Badge徽标数值不更新是怎么回事？

欧阳仪凡提问于 2026-03-14 23:41:24 阅读 68

组件

我在用Vue写一个消息通知的Badge，数据明明变了，但页面上的徽标数字就是不刷新。试过用v-if强制重新渲染也不行。

这是我的代码：

<el-badge :value="unreadCount" class="item">
  <el-button size="small">消息</el-button>
</el-badge>

而且我在methods里打印了console.log(this.unreadCount)，值确实是更新了的，但Badge就是不动，是不是我漏了什么响应式处理？

Badge徽标数据展示

我来解答赞 12 收藏

反馈

1 条解答

凡敬 Lv1

这个问题我之前也碰到过，基本就两个常见原因：

一个是你数据更新的可能是字符串而不是数字。el-badge对类型比较敏感，有时候控制台打印出来的"5"实际上是"5"这个字符串，不是数字5。你可以在赋值的时候强制转成数字试试：

this.unreadCount = Number(res.data.unreadCount)

// 或者

this.unreadCount = +res.data.unreadCount

另一个是值为0的时候el-badge默认不显示。这是组件的设计逻辑，如果你就是想要显示"0"，需要加一个:hidden="false"的属性：

<el-badge :value="unreadCount" :hidden="unreadCount === 0" class="item">

或者直接判断要不要显示Badge：

computed: {

  badgeValue() {

    return this.unreadCount || ''

  }

}

你先试试把类型转成Number，看看能不能解决。

2026-03-17 08:06