vue 强制渲染组件

在vue 中使用v-show 时,组件没有得到重新渲染。以下例子是我v-show 的时候,要默认一个menu高亮,所以对activeIndex重新赋值。 有人会问为什么不用v-if 进到这个页面(这你就别管了)

解决: 使用  this.$forceUpdate() //。配合生命周期函数updated使用
如
html:
    <span v-if="refresh">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        active-text-color="#409EFF"
      >
        <menu-tree  v-for="item in subMenuData" :key="item[propsId]" :menu="item"></menu-tree>
      </el-menu>
    </span>
1.在生命周期中
updated(){
    
    
    this.refresh = true //重新渲染
  },

2、在methods中(关键部分):  
   topTitle(name){
    
    
      this.$nextTick(()=>{
    
    
          this.refresh = false
          if(name == '项目详情'){
    
    
              this.activeIndex = '1'
              this.$forceUpdate()
          }else if(name == '企业详情'){
    
    
             this.activeIndex = '44'
             this.$forceUpdate() 
          }
      })
    },

猜你喜欢

转载自blog.csdn.net/weixin_41760500/article/details/106055729