Vueがコースのジャンプをお勧めします

 

 

 

<テンプレート> 
  の<div> 
    <IMG：SRC = "detail.img" /> 
    <H1> {{detail.title}} </ H1> 
    <H3> {{detail.slogon}} </ H3> 
    <H5> { {detail.level}} </ H5> 
    <P> {{detail.why}} </ P> 
    の<div> 
      <UL V- ため = "detail.chapterアイテム"> 
        <LI> {{} item.title } </ LI> 
      </ UL> 
    </ div>の
    <BR/>     推荐课程：
    の<div> 
      <UL = "項目detail.recommendsで" V-用> 
        < -这个方式有问题！ - > 
        <！ - <LI> <ルータ・リンク： 'インデックス'、クエリ：：{ID：アイテム= "{名前に。ID}} "> {{item.title}} </ルーターリンク> </ LI> - > 
        <LI @クリック=" changeDetail（item.id） "> {{item.title}} </ LI> 
    </ div>
 
      </ UL>
  </ DIV> 
</テンプレート> 

<スクリプト> 
輸出デフォルト{ 
  名： "CourseDetail" 、
  データ（）{ 
    リターン{ 
      インデックス： "CourseDetail" 、
     
      詳細：{ 
        もちろん：ヌル、
        IMG：ヌル、
        レベル：ヌル、
        slogon：ヌル、
        タイトル：ヌル、
        なぜ：ヌル、
        章：[]、
        お勧めします：[] 
      } 
    }。
  }、
  //作成：HTMLレンダリングの前にテンプレートを呼び出すために
  （）{マウント

    するvar ID = この$はroute.query.id ;.
     この.getRouterData（ID）; 
    
  }、
  メソッド：{ 
    getRouterData（NID）{ 

      // AJAXへの送信要求をバックエンドの要求は、詳細
      のvar = _thisをこの; 

      この$ Axios。
        （.request { 
          URL： `HTTP：// 127.0.0.1:8000/api/v1/coursedetail / NID {$} /`、 
          方法： "GET" 
        } ）
        .then（関数（RET）{
           // AJAXリクエストは、成功応答で取得したコンテンツを送信
          // ret.data = 
          IF（1000 === ret.data.codeを）{ 
            _This.detail = ; ret.data.data 
          } 
        }） 
        。キャッチ（関数（RET）{
           // AJAXリクエストの送信は、取得した応答の内容を失敗
        }）; 
    } 
    //ジャンプ推奨コース推奨コースをクリックします詳細
    changeDetail（上記のid）{ 
      バックエンドからgetRouterData要求データを呼び出すための、またはそれ以外の場合は何も表示されます// I必要
      this.getRouterData（上記ID上記の）
      この$のrouter.push（{名前:.「CourseDetail」、クエリ：{上記ID上記： }} ID） }  } 
};
 </ SCRIPT> 

<スタイルスコープ> 
</スタイル>