想实现一个功能,点击一个按钮另一个就会隐藏,在浏览器点击展开按钮导航栏展开,并隐藏了,但是点击展开后功能就实现不了了?

作者站长头像
站长
· 阅读数 6

按钮代码:

 <el-radio-group v-model="isCollapse" style="float:left;top:10px;" >
    <el-radio-button :label="false" v-if="isCollapse" ><i class="el-icon-s-fold" ></i>展开</el-radio-button>
    <el-radio-button :label="true" v-else ><i class="el-icon-s-unfold"></i>收起</el-radio-button>
  </el-radio-group>
data () {
    return {
      isCollapse: true
    }
  }
回复
1个回答
avatar
test
2024-07-03

用v-show替代v-if或者每次切换之后重新渲染组件给el-radio-group加个key=isCollapse让组件重新渲染; 一般我们做切换不用这个radio,直接用一个button搞定

 <el-button @click="isCollapse=!isCollapse" :icon="isCollapse?'el-icon-s-fold':'el-icon-s-unfold'">{{ isCollapse?'展开':'收起' }}</el-button>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容