课件详情报错显示不出来值

src/views/course/CourseDetail.vue

@@ -16,9 +16,11 @@
         </div>
       </a-descriptions-item>
       <a-descriptions-item label="标签">
-        <a-tag color="blue" v-for="(item, index) in detailData.courseTags" :key="index">
-          {{ getDictLabelByKey('dictCourseTag', item.dictValue) }}
-        </a-tag>
+        <template v-if="detailData.courseTags && detailData.courseTags.length > 0">
+          <a-tag color="blue" v-for="(item, index) in detailData.courseTags" :key="index">
+            {{ getDictLabelByKey('dictCourseTag', item.dictValue) }}
+          </a-tag>
+        </template>
       </a-descriptions-item>
     </a-descriptions>
     <div class="buttonGroup">
@@ -28,72 +30,72 @@
   </a-card>
 </template>
 <script>
-import _ from 'lodash'
-import { getCourseDetails } from '@/api/course/course'
-import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
+import _ from 'lodash';
+import { getCourseDetails } from '@/api/course/course';
+import { dictionaryDropDown } from '@/api/sys/dictionaryItem';
 export default {
   name: 'Details',
   components: {},
-  data () {
+  data() {
     return {
       queryParam: { id: this.$route.query.id },
       detailData: {
         imagePath: '', // 图片路径
-        coverPath: []
+        coverPath: [],
       },
       dictCourseType: [],
       dictCourseTag: [],
-      tags: [] // 用于存放标签
-    }
+      tags: [], // 用于存放标签
+    };
   },
   created: function () {
     // 调用词典
-    this.loadData()
-    this.dictionaryDropDown()
-    this.getTagName()
+    this.loadData();
+    this.dictionaryDropDown();
+    this.getTagName();
   },
   methods: {
     // 加载数据
-    loadData () {
-      const parameter = {}
+    loadData() {
+      const parameter = {};
       getCourseDetails(Object.assign(parameter, this.queryParam)).then(res => {
-        this.detailData = res.data
+        this.detailData = res.data;
 
-        this.detailData.coverPath = JSON.parse(res.data.coverPath)
-        console.log('JSON:::::', this.detailData.coverPath)
+        this.detailData.coverPath = JSON.parse(res.data.coverPath);
+        console.log('JSON:::::', this.detailData.coverPath);
 
-        if (this.detailData.coverPath.length != 0) {
-          this.detailData.imagePath = this.detailData.coverPath[0].url
+        if (this.detailData.coverPath && this.detailData.coverPath.length != 0) {
+          this.detailData.imagePath = this.detailData.coverPath[0].url;
         }
-        console.log('url', this.detailData.imagePath)
-      })
+        console.log('url', this.detailData.imagePath);
+      });
     },
 
-    close () {
-      this.$router.push({ path: '/course/CourseList/' + this.$route.query.type, query: {} })
+    close() {
+      this.$router.push({ path: '/course/CourseList/' + this.$route.query.type, query: {} });
     },
-    edit (record) {
+    edit(record) {
       this.$router.push({
         path: '/course/CourseAdd',
-        query: { id: this.queryParam.id, type: this.$route.query.type }
-      })
+        query: { id: this.queryParam.id, type: this.$route.query.type },
+      });
     },
-    getDictLabelByKey (name, value) {
-      let result = '-'
-      const list = this[name]
+    getDictLabelByKey(name, value) {
+      let result = '-';
+      const list = this[name];
       if (Array.isArray(list)) {
-        const item = _.find(list, ['value', value])
+        const item = _.find(list, ['value', value]);
         if (item) {
-          result = item.name
+          result = item.name;
         }
       }
-      return result
+      return result;
     },
     // 获取数据字典
-    dictionaryDropDown () {
+    dictionaryDropDown() {
       // 课程类别
       dictionaryDropDown({ dictionaryCode: '0006' }).then(res => {
-        this.dictCourseType = res.data
+        this.dictCourseType = res.data;
 
         // // 课程类别的value转换成字典name
         // for (let i = 0; i < this.dictCourseType.length; i++) {
@@ -101,13 +103,13 @@ export default {
         //     this.detailData.courseTypeName = this.dictCourseType[i].name
         //   }
         // }
-      })
+      });
     },
-    getTagName () {
+    getTagName() {
       dictionaryDropDown({ dictionaryCode: '0008' }).then(res => {
-        this.dictCourseTag = res.data
+        this.dictCourseTag = res.data;
 
-        console.log(this.dictCourseTag)
+        console.log(this.dictCourseTag);
 
         // const tags = []
         // for (let i = 0; i < this.dictCourseTag.length; i++) {
@@ -119,10 +121,10 @@ export default {
         // }
         // console.log('tagagagaga', tags)
         // this.detailData.tags = tags
-      })
-    }
-  }
-}
+      });
+    },
+  },
+};
 </script>
 
 <style>