這裡的demo使用的組件開發，裡面的chapterList欄位是由父級頁面傳入。
代碼示例圖1、圖片中標識的 1 是 v-model 要執行的函數方法，1 裡面的this.chapterList 欄位是從父級頁面傳入的數據。
2、圖片中標識的 2 是 elementui 中Collapse摺疊面板提到的唯一標示。
3、通過圖片中標示 1 的方法調用，將 i.chapter_title return 上去，與圖片中的標識 2 進行對比展示。
附源碼：
<template>
<div>
<el-collapse v-loading="loading" v-if="chapterList.length > 0" v-model="opened">
<el-collapse-item v-for="(item, index) in chapterList" :key="index" :name="item.chapter_title">
<template slot="title">
<div>
<div>{{ item.chapter_title }}</div>
</div>
</template>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
export default {
props: {
chapterList: {
type: Array,
},
},
data() {
return {};
},
computed: {
opened(){
return this.chapterList.map((i)=>{
return i.chapter_title
})
}
};
</script>