关于congtent内容报错，不显示

content 页面

<template>
   <div class="content-wrapper">
     <div class="loading-container" v-if="isLoading">
<!--<me-loading>-->
<div class="loading-wrapper">
         <me-loading/>
       </div>
     </div>
     <me-scroll ref="scroll">
       <div class="content">
         <div class="pic" v-if="content.banner">
           <a :href="content.banner.linkUrl" class="pic-link">
             <img @load="updateScroll" :src="content.banner.picUrl" alt="" class="pic-img">
           </a>
         </div>
         <div
class="section"
v-for="(section, index) in content.data"
:key="index"
>
           <h4 class="section-title">{{section.name}}</h4>
           <ul class="section-list">
             <li
class="section-item"
v-for="(item, i) in section.itemList"
:key="i"
>
               <a :href="item.linkUrl" class="section-link">
                 <p class="section-pic" v-if="item.picUrl">
                   <img v-lazy="item.picUrl" alt="" class="section-img">
                 </p>
                 <p class="section-name">{{item.name}}</p>
               </a>
             </li>
           </ul>
         </div>
       </div>
     </me-scroll>
     <div class="g-backtop-container">
       <me-backtop @backtop="backToTop" :visible="isBacktopVisible"></me-backtop>
     </div>
   </div>
</template>
<script>
import MeLoading from 'base/loading';
import MeScroll from 'base/scroll';
import MeBacktop from 'base/backtop';
import {getCategoryContent} from 'api/category';
import storage from 'assets/js/storage';
import {CATEGORY_CONTENT_KEY, CATEGORY_CONTENT_UPDATE_TIME_INTERVAL} from './config';
export default {
   name: 'CategoryContent',
components: {
     MeLoading,
MeScroll,
MeBacktop
   },
props: {
     curId: {
       type: String,
default: ''
}
   },
data() {
     return {
       content: {},
isBacktopVisible: false,
isLoading: false
};
},
watch: {
     curId(id) {
       this.isLoading = true;
this.getContent(id).then(() => {
         this.isLoading = false;
this.backToTop(0);
});
}
   },
methods: {
     getContent(id) {
       return getCategoryContent(id).then(data => {
         if (data) {
           this.content = data;
}
       });
},
backToTop(speed) {
       this.$refs.scroll && this.$refs.scroll.scrollToTop(speed);
},
updateScroll() {
       this.$refs.scroll && this.$refs.scroll.update();
}
   }
 };
</script>
<style lang="scss" scoped>
@import "~assets/scss/mixins";
.content-wrapper {
   position: relative;
height: 100%;
}
 .loading-container {
   position: absolute;
top: 0;
left: 0;
z-index: $category-popup-z-index;
   @include flex-center();
width: 100%;
height: 100%;
}
 .mine-loading {
   color: #fff;
font-size: 14px;
}
 .loading-wrapper {
   width: 50%;
padding: 30px 0;
background-color: $modal-bgc;
border-radius: 4px;
}
 .content {
   padding: 10px;
}
 .pic {
   margin-bottom: 12px;
&-link {
     display: block;
}
   &-img {
     width: 100%;
}
 }
 .section {
   margin-bottom: 12px;
&:last-child {
     margin-bottom: 0;
}
   &-list {
     display: flex;
flex-wrap: wrap;
background-color: #fff;
padding: 10px 10px 0;
}
   &-item {
     width: (100% / 3);
}
   &-link {
     display: block;
}
   &-pic {
     position: relative;
width: 80%;
padding-bottom: 80%;
margin:0 auto;
}
   &-img {
     position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
}
   &-name {
     height: 36px;
line-height: 36px;
text-align:center;
     @include ellipsis();
}
 }
 .g-backtop-container {
   bottom: 10px;
}
</style>

index 页面

<template>
 <div class="category">
   <header class="g-header-container">
     <category-header/>
   </header>
   <div class="g-content-container">
     <div class="sidebar">
       <category-tab @switch-tab="getCurrentId"/>
     </div>
     <div class="main">
       <category-content :curId="curId"/>
     </div>
   </div>
 </div>
</template>

<script>
import CategoryHeader from './header';
import CategoryTab from './tab';
import CategoryContent from './content';
export default {
   name: 'Category',
components: {
     CategoryHeader,
CategoryTab,
CategoryContent
   },
data() {
     return {
       curId: ''
};
},
methods: {
     getCurrentId(id) {
       this.curId = id;
}
   }
 };
</script>

<style lang="scss" scoped>
@import '~assets/scss/mixins';
.category {
   overflow: hidden;
width: 100%;
height: 100%;
background-color: $bgc-theme;
}
 .g-content-container {
   display:flex;
}
 .sidebar {
   width: 80px;
height: 100%;
}
 .main {
   flex-grow:1;
height: 100%;
}
</style>

category.js文件

import axios from 'axios';
import {SUCC_CODE, TIMEOUT} from './config';
const CancelToken = axios.CancelToken;
let cancel;
// 获取内容数据--ajax
export const getCategoryContent = (id) => {
 cancel && cancel('取消了前一次的请求');
 cancel = null;
 // return axios.get()
 return axios.get(`http://www.imooc.com/api/category/content/${id}`, {
   timeout: TIMEOUT,
   cancelToken: new CancelToken(function executor(c) {
     cancel = c;
   })
 }).then(res => {
   if (res.data.code === SUCC_CODE) {
     console.log('ok');
     return res.data.content;
   }
   throw new Error('没有成功获取到数据！');
 }).catch(err => {
   if (axios.isCancel(err)) { // 取消前一次的请求
     console.log(err);
   } else {
     // handler error
     console.log(err);
   }
 });
};