<template>
<div>
<img :src="detail.img" />
<h1>{{ detail.title }}</h1>
<h3>{{detail.slogon }}</h3>
<h5>{{ detail.level }}</h5>
<p>{{ detail.why }}</p>
<div>
<ul v-for="item in detail.chapter">
<li>{{ item.title }}</li>
</ul>
</div>
<br/>
推荐课程：
<div>
<ul v-for="item in detail.recommends">
<!-- 这个方式有问题 -->
<!-- <li><router-link :to="{name:'index',query:{id:item.id}}">{{ item.title }}</router-link></li> -->
<li @click="changeDetail(item.id)">{{ item.title }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "CourseDetail",
data() {
return {
index: "CourseDetail",
detail: {
course: null,
img: null,
level: null,
slogon: null,
title: null,
why: null,
chapter: [],
recommends: []
}
};
},
// created:在模板渲染成html前调用
mounted() {
var id = this.$route.query.id;
this.getRouterData(id);
},
methods: {
getRouterData(nid) {
// 发送ajax请求给后端 请求详细信息
var _this = this;
this.$axios
.request({
url: `http://127.0.0.1:8000/api/v1/coursedetail/${nid}/`,
methods: "GET"
})
.then(function(ret) {
// ajax请求发送成功后，获取的响应内容
// ret.data=
if (ret.data.code === 1000) {
_this.detail = ret.data.data;
}
})
.catch(function(ret) {
// ajax请求发送失败后，获取的响应内容
});
},
//点击课程推荐跳转到推荐课程详细
changeDetail(id){
// 我需要重新调用getRouterData 向后端请求数据,不然不然会显示为空
this.getRouterData(id)
this.$router.push({name:'CourseDetail',query:{id:id}})
}
}
};
</script>
<style scoped>
</style>