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