当element-ui标签页tabs栏slot中的数据是异步加载的无法更新

 element-ui标签页tabs栏slot中的数据，

一进入页面调用 search 方法，获取到的数据给num，但此时无法立即刷新num，一进来只有小红点，而小红点中没有数据

思路：

让组件强制刷新（销毁并重置），即加一个 v-if 条件。

v-if 官方解释 ：v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

方法一：

更新到最新版本的 element-ui 就不会有这个问题

更新的时候 npm install element-ui 就会看 package.json 中，如果有 ^ ，就会更新到最新版本

如果是 npm install，就会看看本地 package-lock.json 文件中有没有element-ui，如果有就不会去更新了。

    "element-ui": "^2.10.1" 

方法二：

给 el-tab-pane 直接加上 v-if 判断

    
    待开始{{num}}
    已接收{{num2}}

由于初始化的 num 和 num2 都为 0，一进入页面进行了查询操作并赋值。但此时由于 slot 的原因， num 和 num2 无法立即刷新，所以要加上 v-if 条件，当 num 和 num2 的条件改变时 v-if 新建组件，所以就能在一刷新时渲染出来了。

方法三：

 

    
    待开始{{num}}
    已接收{{num2}}

// 在需要强制刷新的组件中添加  v-if="hackReset >= 0"
    
    待开始{{num}}
    已接收{{num2}}

由于 v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

也由于 v-if 很耗性能，所以只要在一开始刷新的时候让他执行一次就可以了。

data中：
    hackReset: 0

// 触发事件 searchInfo 中执行下面代码：
 searchInfo () {
    axios.post(api, this.searchForm).then(res => {
        if (res.data.code === 200) {
            num = res.data.data
            this.hackReset--
            this.$nextTick(() => {
                this.hackReset = 1000
            })
        }
    }
}

最终效果：把数字渲染出来了

参考：https://blog.csdn.net/qq_32786139/article/details/81776654