Vue recommend courses Jump

 

 

 

<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: rendering html to invoke the template before 
  Mounted () { 

    var ID = the this $ route.query.id;.
     The this .getRouterData (ID); 
    
  }, 
  Methods: { 
    getRouterData (NID) { 

      // send request to ajax backend requests details 
      var _this = the this ; 

      the this $ Axios. 
        .request ({ 
          URL: `HTTP: // 127.0.0.1:8000/api/v1/coursedetail / NID {$} /`, 
          Methods: "the GET" 
        } ) 
        .then ( function (RET) {
           // the ajax request sent successfully, the acquired content in response 
          // ret.data = 
          IF (1000 === ret.data.code) { 
            _This.detail = ; ret.data.data 
          } 
        }) 
        . The catch ( function (RET) {
           // the ajax request transmission failed, the contents of the acquired response 
        }); 
    } 
    // jump to click recommended courses Recommended Course Details 
    changeDetail (the above mentioned id) { 
      // I need to call getRouterData request data from the back-end, or will otherwise appear empty 
      this.getRouterData (the above mentioned id) 
      the this $ router.push ({name:. 'CourseDetail' , Query: {the above mentioned id: }} ID)  }  } 
};
 </ Script> 

<style scoped> 
</ style>