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&nbsp; ref="elTabs"&nbsp; v-for="(item, index) in systemOptionsHeaderList"&nbsp; :key="index"&nbsp; :name="item.value"&nbsp; :lazy="true">// 在控制变量改变的时候进行 强制渲染更新let childrenRefs = this.$refs.elTabs.$childrenthis.$nextTick(() => {&nbsp; childrenRefs.forEach(child => child.$forceUpdate())})

Answer 2

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

Answer 3

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