想实现一个功能,点击一个按钮另一个就会隐藏,在浏览器点击展开按钮导航栏展开,并隐藏了,但是点击展开后功能就实现不了了?
按钮代码:
<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个回答
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>
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容