CODEWITHSUNDEEP
javascriptvue.js
Packy
Packy

Reputation: 3573

vue.js single component set data

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

Upvotes: 1

Views: 227

Answers (2)

William Carron
William Carron

Reputation: 410

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
});

Upvotes: 0

Vitor Freitas
Vitor Freitas

Reputation: 166

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);
});

Upvotes: 1

Related Questions