一個很低級的錯誤。
背景:點擊學生信息,學生信息的具體內容收起,右上角的icon改變。
<div class="panel panel-info">
<div class="panel-heading" @click="shrink()">
<el-row :gutter="20">
<el-col :span="23"><span class="panel-title">學生信息</span></el-col>
<el-col :span="1"><b-icon v-if="!activeStudent" icon="arrow-right" key="1"></b-icon></el-col>
<el-col :span="1"><b-icon v-if="activeStudent" icon="arrow-down" key="2"></b-icon></el-col>
</el-row>
</div>
<table class="table" v-show="activeStudent">
<tr>
<th>學號</th>
<th>姓名</th>
<th>班級</th>
</tr>
<tr v-for="(studentItem,index) in studentData" :key="index">
<td v-for="(item,idx) in studentItem" :key="idx">
{{item}}
</td>
</tr>
</table>
</div>
js部分注意是data而不是computed! 如果是computed就無法實現!
data(){
return{
//摺疊面板的序號
activeStudent: false,
}
}