我们发现:el-badge绑定的变量是有数据的,但是界面上就是不渲染。

这个时候执行getTodo发现数据已经打印出来,当是视图未发送变化。于是查阅资料:vm.$forceUpdate()
示例:
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。 强制更新
如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事。
你可能还没有留意到数组或对象的变更检测注意事项,或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态。
然而,如果你已经做到了上述的事项仍然发现在极少数的情况下需要手动强制更新,那么你可以通过 $forceUpdate 来做这件事。 解决方法:
<template>
<el-tabs>
<el-tab-pane>
<span slot="label">
<i class="el-icon-message">人员信息</i>
<el-badge :value="todo" v-if="todo>0" size="mini" class="item">
</el-badge>
</span>
</el-tab-pane>
<el-tab-pane label="用户管理" name="user"></el-tab-pane>
</el-tabs>
</template> <script>
export default {
data() {
return {
todo: 0,
}
},
mounted() {
//代办数据
getTodo() {
this.$http({
method: "post",
url: `...`,
params: {...}
}).then(res => {
console.log("代办数据请求成功", res.data.data.todoNum);
this.todo = res.data.data.todoNum || 0;
})
},
},
created() {
}
}
</script>
 
getTodo() {
this.$http({
method: "post",
url: `...`,
params: {...}
}).then(res => {
console.log("代办数据请求成功", res.data.data.todoNum);
this.todo = res.data.data.todoNum || 0;
this.$children[0].$children[0].$forceUpdate();
})
},

  

Element里el-badge在el-tab里视图不被渲染问题的更多相关文章

  1. EasyUI-在iframe里获取现阶段选中的tab的标题

    在iframe里获取当前选中的tab的标题(easyui) var currTab =$$('#tabs').tabs('getSelected'); console.info(currTab.pan ...

  2. EL&Filter&Listener:EL表达式和JSTL,Servlet规范中的过滤器,Servlet规范中的监听器,观察着设计模式,监听器的使用,综合案例学生管理系统

    EL&Filter&Listener-授课 1 EL表达式和JSTL 1.1 EL表达式 1.1.1 EL表达式介绍 *** EL(Expression Language):表达式语言 ...

  3. 将数组里的元素拼接成sql里的in条件

    /** * 将数组里的元素拼接成sql里的in条件,如'a1','a2','a3' * @param array * @returns */function makeSqlInStr(array){ ...

  4. 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的

    这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...

  5. Log4.Net 在Winfrom、MVC、ashx程序里的使用,ashx程序里使用异步

    最近做一个双11活动的,是一套相关的H5页面.本来以为难度不大,但是做下来几天还是遇到些问题.就总结一下吧,还是有收获的. 1.在H5页面中,有一个遮罩层,还是挺有意思的.直接用div+css控制遮罩 ...

  6. Log4.Net 在Winform、MVC、ashx程序里的使用,ashx程序里使用异步

    最近做一个双11活动的,是一套相关的H5页面.本来以为难度不大,但是做下来几天还是遇到些问题.就总结一下吧,还是有收获的. 1.在H5页面中,有一个遮罩层,还是挺有意思的.直接用div+css控制遮罩 ...

  7. EL表达式 EL函数 自定义el函数 《黑马程序员_超全面的JavaWeb视频教程vedio》

    \JavaWeb视频教程_day12_自定义标签JSTL标签库,java web之设计模式\day12_avi\12.EL入门.avi; EL表达式 1. EL是JSP内置的表达式语言! * jsp2 ...

  8. 需求:过滤下面这个网页里共723行 校对中里 行数为两位数的 行 并设置sz和rz在Windows和Linux之间发送和接收文件不用搭FTP

    需求:过滤下面这个网页里共723行 校对中里 行数为两位数的 行 并设置sz和rz在Windows和Linux之间发送和接收文件不用搭FTP 需求:过滤下面这个网页里共723行 校对中里 行数为两位数 ...

  9. ACM数论-欧几里得与拓展欧几里得

    ACM数论——欧几里得与拓展欧几里得 欧几里得算法: 欧几里德算法又称辗转相除法,用于计算两个整数a,b的最大公约数. 基本算法:设a=qb+r,其中a,b,q,r都是整数,则gcd(a,b)=gcd ...

  10. java里面的package/import 和PHP里面的namespace/use 是一模一样的吗

    java里面的package/import 和PHP里面的namespace/use 是一模一样的吗? java: php package mypage; namespace mypage; impo ...

随机推荐

  1. 《JavaScript 模式》读书笔记(5)— 对象创建模式2

    这一篇,我们主要来学习一下私有属性和方法以及模块模式. 三.私有属性和方法 JavaScript并没有特殊的语法来表示私有.保护.或公共属性和方法,在这一点上与Java或其他语言是不同的.JavaSc ...

  2. 决战Leetcode: easy part(51-96)

    本博客是个人原创的针对leetcode上的problem的解法,所有solution都基本通过了leetcode的官方Judging,个别未通过的例外情况会在相应部分作特别说明. 欢迎互相交流! em ...

  3. Spring----注释----开启Annotation <context:annotation-config> 和 <context:component-scan>诠释及区别

    来源:http://www.cnblogs.com/leiOOlei/p/3713989.html <context:annotation-config> 和 <context:co ...

  4. javascript正则表达式入门先了解这些

    前言 此内容由学习<JavaScript正则表达式迷你书(1.1版)>整理而来(于2020年3月30日看完).此外还参考了MDN上关于Regex和String的相关内容,还有ECMAScr ...

  5. matplotlib.pyplot库函数关于坐标轴显示的支持

    matplotlib.pyplot库函数关于坐标轴显示的支持 https://blog.csdn.net/Stark_595/article/details/80787005?depth_1-utm_ ...

  6. Building Applications with Force.com and VisualForce(Dev401)( 八):Designing Applications for Multiple users:Managing your users' experience II

    Dev 401-008: Design Applications for Multiple Users' Experience Part 2Universal Containers Scenario1 ...

  7. C++ 趣图

    一.心形 1. http://mathworld.wolfram.com/HeartCurve.html #include<stdio.h> using namespace std; in ...

  8. 物体的三维识别与6D位姿估计:PPF系列论文介绍(三)

    作者:仲夏夜之星 Date:2020-04-08 来源:物体的三维识别与6D位姿估计:PPF系列论文介绍(三) 文章“A Method for 6D Pose Estimation of Free-F ...

  9. Spring Boot整合Servlet,Filter,Listener,访问静态资源

    目录 Spring Boot整合Servlet(两种方式) 第一种方式(通过注解扫描方式完成Servlet组件的注册): 第二种方式(通过方法完成Servlet组件的注册) Springboot整合F ...

  10. A换算时间(只想开学)HDU 6556

    题目链接 思路如下 把时间转化为 24小时制下进行考虑,首先我们要明白(在24小时制下):12 点表示是下午PM ,而 24点表示的是明天的 0点(12小时制下),这两个地方需要特殊考虑 题解如下 # ...