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> 

Это невозможно? Как я могу установить данные last на Ajax вызова, я делаю в mounted

Answer 1

Ваш this внутри функции then не то же самое this вашего компонента, так как на Javascript, то ключевое слово 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 - Использование функций стрелок ES6 (будет производить тот же эффект, что и выше)

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

this в вашей .then(response) функции является проблемой. this - очень запутанная вещь, даже для опытных разработчиков. Вот что происходит:

Вы пытаетесь установить значение свойства данных в компоненте vue, используя this. К сожалению, вы не ссылаетесь на данные компонента. Вы на самом деле ссылаетесь на функцию axios.get(). Это связано с тем, что привязан к объекту/сфере действия, в котором он был вызван («сайт-вызов»). Вызвав внутри функции , вы устанавливаете свойство, которое не существует.

Решения: Как говорится в предыдущем комментарии: .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 
});