Sign in

Element El tab cannot update values when adding El badge with custom tab

Nerrix edited in Wed, 10 Aug 2022

The code is as follows. When you click the button to add a value, the value in the bag will not change. You must click tab to update it. How can I update it by clicking Add

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<el-button @click="q">+</el-button>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first"><span slot="label" style="position: relative;">
          <el-badge :value="aa" class="badge-a"/>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>

var Main = {
    data() {
      return {
        activeName: 'second'
    methods: {
    q() {
      handleClick(tab, event) {
        console.log(tab, event);
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

Here is the real address https://jsfiddle.net/k17ovgt9/

4 Replies
commented on Wed, 10 Aug 2022

If the components are nested too deeply, there may be this case. Try this. $forceupdate ()

commented on Wed, 10 Aug 2022

You can bind a key to the El tab panel. Every time the value of badge changes, the value of the key also changes. You can refresh the component again. Demo: https://codepen.io/anon/pen/g...

commented on Wed, 10 Aug 2022

this .$ children [ 0 ].$ children [ 0 ].$ forceUpdate () That is to find el - The entire header tag element under tabs is forced to refresh

commented on Thu, 11 Aug 2022

Just find the DOM node of the parent component of El badge and use the $forceupdate() method

lock This question has been locked and the reply function has been disabled.