js error (null pointer)

src/views/index/components/index-card-elective.vue

@@ -2,7 +2,7 @@
   <index-card title="大数据选科" v-if="formatList.length">
     <index-card-content :list="formatList" :line-size="lineSize">
       <template #default="{item}">
-        <index-image-item v-bind="item" ></index-image-item>
+        <index-image-item v-bind="item"></index-image-item>
       </template>
     </index-card-content>
   </index-card>
@@ -20,76 +20,74 @@ export default {
   mixins: [loginCheckMixin],
   name: 'index-card-elective',
   methods: {},
-  computed:{
+  computed: {
     ...mapGetters(['middlebarRouters']),
     listOpt() {
       const obj = {}
       this.list.map(item => {
-        obj[`${item.title}${item.path}`] = {desc: item.desc }
+        obj[`${item.title}${item.path}`] = { desc: item.desc }
       })
       return obj
     },
     formatList() {
-      if(!this.middlebarRouters.length) return []
-      const listOptKey = Object.keys(this.listOpt)
-      let formatList = []
-      return this.middlebarRouters[1].children.slice(0,4).map((item,idx) =>{
+      if (!this.middlebarRouters.length) return []
+      return this.middlebarRouters[1]?.children?.slice(0, 4).map((item, idx) => {
         return {
           title: item.meta.title,
-          desc:this.listOpt[`${item.meta.title}${item.path}`]?.desc,
-          src:this.list[idx].src,
-          path:item.path,
+          desc: this.listOpt[`${item.meta.title}${item.path}`]?.desc,
+          src: this.list[idx].src,
+          path: item.path,
           ...this.styleStatic
         }
-      })
+      }) || []
     }
   },
   data() {
     return {
-      lineSize:4,
-      styleStatic:{
-        titleStyle:{
-          top:'30px',
-          left:'20px',
+      lineSize: 4,
+      styleStatic: {
+        titleStyle: {
+          top: '30px',
+          left: '20px',
           fontSize: '24px',
-          color:"#000"
+          color: '#000'
         },
-        descStyle:{
-          top:'70px',
-          left:'20px',
-          color:"#000"
+        descStyle: {
+          top: '70px',
+          left: '20px',
+          color: '#000'
         },
-        titleClasses:['absolute','bold'],
-        descClasses:['absolute','bold','f12'],
+        titleClasses: ['absolute', 'bold'],
+        descClasses: ['absolute', 'bold', 'f12']
       },
-      list:[
+      list: [
         {
           title: '智能选科报名',
-          src:`${this.$imgBase}index/elective/elective_apply.png`,
-          desc:'通过意向的院校和专业推荐选科方案',
-          path: '/new-gaokao/bigdataSelectCourse/round-select',
+          src: `${this.$imgBase}index/elective/elective_apply.png`,
+          desc: '通过意向的院校和专业推荐选科方案',
+          path: '/new-gaokao/bigdataSelectCourse/round-select'
         },
         {
           title: '个人分班信息',
-          src:`${this.$imgBase}index/elective/elective_dispatch.png`,
-          desc:'通过意向的院校和专业推荐',
-          path: '/new-gaokao/bigdataSelectCourse/personalDivideClass',
+          src: `${this.$imgBase}index/elective/elective_dispatch.png`,
+          desc: '通过意向的院校和专业推荐',
+          path: '/new-gaokao/bigdataSelectCourse/personalDivideClass'
         },
         {
           title: '个人选科报告',
-          src:`${this.$imgBase}index/elective/elective_report.png`,
-          desc:'通过大学/专业维度查询选考科目要求',
-          path: '/new-gaokao/bigdataSelectCourse/personalSelectCourseReport',
+          src: `${this.$imgBase}index/elective/elective_report.png`,
+          desc: '通过大学/专业维度查询选考科目要求',
+          path: '/new-gaokao/bigdataSelectCourse/personalSelectCourseReport'
         },
         {
           title: '个人课程表',
-          src:`${this.$imgBase}index/elective/elective_table.png`,
-          desc:'通过意向的院校和专业推荐',
-          path: '/new-gaokao/bigdataSelectCourse/personalClassCategory',
+          src: `${this.$imgBase}index/elective/elective_table.png`,
+          desc: '通过意向的院校和专业推荐',
+          path: '/new-gaokao/bigdataSelectCourse/personalClassCategory'
         }
       ]
     }
-  },
+  }
 
 }
 </script>