vue.js単一コンポーネントセットデータ

Question

私は、ajax呼び出しでデータを取り込む必要があるコンポーネントがあります。コンポーネントが正常に呼び出され、データがajax呼び出しで返されますが、テンプレートのデータに割り当てることができません。

<template> 

    <div class="class-hero" id="dashboard-hero" :style="{ 'background-image': 'url(' + last.content_image + ')' }"> 

     <div class="class-hero-overlay"></div> 

     <div class="class-hero-container"> 

      <h1> {{ last.content_name }}</h1> 
      <p> {{ last.content_description }} </p> 


      <div class="class-stat"> 
       <div id="classesCirle" class="hero-class-progress"></div> 
       <p>Modules</p> 
      </div> 
      <div class="class-stat"> 
       <div id="studentsCircle" class="hero-class-progress"></div> 
       <p>students</p> 
      </div> 
      <div class="class-stat"> 
       <div id="tasksCirle" class="hero-class-progress"></div> 
       <p>tasks</p> 
      </div> 

      <a :href="'/all-classes/' + last.content_name + '/' " class="button-resume"><p>Resume</p></a> 

     </div> 

    </div> 

</template> 

<script> 

    module.exports = { 
     data: function() { 
      return { 
       last:[] 
      } 
     }, 
     mounted: function() { 

      axios.get('/custom_api/api_home_get.php?', { 
       params: { 
        ID: 14 
       } 
       }) 
       .then(function (response) { 
       this.last = response.data.currentCourses[0]; 
       console.log(response.data.currentCourses[0]); 
       }) 
       .catch(function (error) { 
       console.log(error); 
       }); 

     } 
    } 
</script> 

これはできませんか？どのように私はthen関数の内部であなたのthismounted

Answer 1

に私が作るAJAX呼び出しにデータをlastを設定することができますJavascriptの上、thisキーワードは、その親関数にバインドされているため、コンポーネントの同じthisではありません。

詳細についてはhereとthisの例をご覧ください。

あなたはいくつかの方法でそれを修正することができます：

1 - 関数プロトタイプのbind方法を使用します。これはあなたの外のthisをあなたのローカルthisと結びつけます。

axios.get('/custom_api/api_home_get.php?', { 
    params: { 
    ID: 14 
    } 
}) 
.then(function (response) { 
    this.last = response.data.currentCourses[0]; 
    console.log(response.data.currentCourses[0]); 
}.bind(this)) 
.catch(function (error) { 
    console.log(error); 
}); 

2に -

axios.get('/custom_api/api_home_get.php?', { 
    params: { 
    ID: 14 
    } 
}) 
.then(response => { 
    this.last = response.data.currentCourses[0]; 
    console.log(response.data.currentCourses[0]); 
}) 
.catch(function (error) { 
    console.log(error); 
}); 

Answer 2

（上記と同じ効果を生じるであろう）ES6矢印機能を使用して、.then(response)関数でthisが問題となります。 thisは、時には経験豊富な開発者にとっても非常に混乱するものです。ここでは何が起こっているのですか：

vueコンポーネントのデータプロパティの値をthisで設定しようとしています。残念ながら、コンポーネントデータは参照していません。実際には、axios.get()関数を参照しています。これは、thisが呼び出されたオブジェクト/スコープ（ 'call-site'）にバインドされているためです。関数内でthisを呼び出すと、存在しないプロパティを設定しています。

ソリューション： 前のコメントによると：約束の終わりに結びついた.bind(this)はそれを修正する必要があります。

また、あなたがマウントスコープにバインドするvar that = this;を使用することができますの

mounted: function() { 
const that = this; 

axios.get('url', { 
    // Code here 
}).then(response) { 
    const reply = response.data.currentCourses[0]; 
    that.last = reply; 
    console.log("that.last: ",that.last," | reply: ", reply); 
}).catch(function(error) { 
    // more code 
});