current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

I have a component that I need to pull some data in through an ajax call. The component is called fine, and the data is returned in the ajax call but I cant assign it to the data in the template?

<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>

Is this not possible? How can I set the data last to the ajax call I make in the mounted

share|improve this question
    
Possible duplicate of Populate table in Vue template component from rest api – Saurabh Jan 5 at 3:34
up vote 2 down vote accepted

Your this inside the then function isn't the same this of your component, because on Javascript, the this keyword is bound to its parent function.

You can learn more about it here and with this example.

You can fix it with some ways:

1 - Using the bind method of the Function prototype. This will bind your outside this with your local 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 - Using ES6 arrow functions (will produce the same effect as above)

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);
});
share|improve this answer
up vote 0 down vote

The this in your .then(response) function is the problem. this is a very confusing thing, even for experienced developers sometimes. Here's what's going on:

You are trying to set the value of a data property on the vue component, using this. Unfortunately, you aren't referencing the component data. You are actually referring to the axios.get() function. This is because this is bound to the object/scope in which it was called(the 'call-site'). By calling this inside the function, you are setting a property which does not exist.

Solutions: As the prior comment says: .bind(this) chained to the end of the promise should fix it.

Alternatively, you could use var that = this; to bind it to the mounted scope: 

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
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.