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

Question

按钮代码：

 <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
    }
  }

Answer 1

用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>

Answer 2

<el-radio-group v-model="isCollapse" style="float:left;top:10px;">
  <el-radio-button :label="false" v-show="isCollapse">
    <i class="el-icon-s-fold"></i>展开
  </el-radio-button>
  <el-radio-button :label="true" v-show="!isCollapse">
    <i class="el-icon-s-unfold"></i>收起
  </el-radio-button>
</el-radio-group>