关于element tab组件使用自定义标签加入el-badge时无法更新数值问题

514 阅读1分钟

最近在使用tab组件发现嵌入el-badge时获取到了数值,但是el-badge显示的还是初始值,没有及时更新,点击了tab页后,数值才更新

<div class="layout-content-main">
  <el-tabs v-model="activeName" @tab-click="_changeTabs">
    <el-tab-pane label="已领任务" name="item">
      <ItemTab ref="itemTab"></ItemTab>
    </el-tab-pane>
    <el-tab-pane name="claim">
      <span slot="label">待认领任务<el-badge :value="num"></el-badge></span>
      <ClaimTab ref="claimTab" @on-result-change="_getNum"></ClaimTab>
    </el-tab-pane>
  </el-tabs>
</div>

解决方法:

在获取到num值之后,加上以下一行代码就可以了

this.$children[0].$children[0].$forceUpdate()