element slot 数据无法及时更新？

Question

<el-tab-pane  v-for="(item, index) in systemOptionsHeaderList"  :key="index"  :name="item.value"  :lazy="true">  <span    slot="label"  >    {{item.label}}    <tips      v-if="formHasModify"      content="本页数据暂未保存"    />  </span></el-tab-pane>使用了 element-ui 中的 tab-pane希望在 label 内添加一个小组件，组件逻辑检查过，没问题这里使用v-if 控制组件的显示和隐藏问题就是： 当 formHasModify 内容改变之后，无法立即渲染出这个小组件需要 当点击 或者 切换 tab-pane 才能够手动的渲染出来

Answer 1

<el-tab-pane

  ref="elTabs"

  v-for="(item, index) in systemOptionsHeaderList"

  :key="index"

  :name="item.value"

  :lazy="true"

>

// 在控制变量改变的时候进行 强制渲染更新

let childrenRefs = this.$refs.elTabs.$children

this.$nextTick(() => {

  childrenRefs.forEach(child => child.$forceUpdate())

})

Answer 2

你好，请问这个问题解决了吗，我也遇到了同样的问题

Answer 3

这个具体也不好说，个人的理解是因为你的数据是循环出来的，数据量大，你使用v-if等同于将代码删除了，所以即使你状态改变了，这段代码依然没有渲染出来，建议你用v-show试试