v-for循环加载el-card并控制自动展开收起

最近一直在做vue的项目，遇到一个需要循环加载el-card并且每个可以自由展开，收起，刚接触vue，觉得页面不能用jquery真是硬伤，问了同事， 查了资料最后终于解决了，写出了的代码很简单但是过程挺艰难，所以总结一下：

页面代码：

<el-card class="box-card"  v-for="(month,index)  in monthdata"  v-if="index==0"  v-bind:month="month" v-bind:index="index">
   <div slot="header" class="clearfix">
    <span style="line-height: 36px;font-size:17px ;color:#666 ;"><i style="color:#20a0ff ;font-style: normal;">  =={{ index }} - {{ month.C_YEAR_MONTH }}</i> 月度目标</span>
    <i style="float: right;color:#20a0ff;line-height: 36px;cursor: pointer;" class="el-icon-caret-bottom" v-on:click="change(month.C_ID)"></i>
   </div>
   <div :id="month.C_ID"  >
     <el-form ref="form" :model="form" :rules="rules" label-width="110px">
       <el-row class="area">
       <el-form-item label="月目标要求">
        <el-input v-model="form.C_TARGET" type="textarea"></el-input>
    </el-form-item>
    <el-row>
        <el-col :span="11">
        <el-row>
            <el-col :span="22">
            <el-form-item label="进度要求完成到" >
                <el-input v-model="form.C_PROCESS" ></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="2"><span style="line-height: 36px"> &nbsp;%</span></el-col>
        </el-row>        
        </el-col>
        <el-col :span="11" :offset="2">
        <el-form-item label="核定工作量">
            <el-input v-model="form.C_WORK_LOAD"></el-input>
        </el-form-item>
        </el-col>
    </el-row>
    </el-row>
  </div>
</el-card>

change方法：

change:function (data){
      let dv=document.getElementById(data);
        if(dv.className=='show')
	  dv.removeAttribute("class");
	else
	 dv.setAttribute("class", "show");
}

show样式：

.show{display:none;}