implementing data in a single component using vue.js

Question

implementing data in a single component using vue.js

I am facing an issue with a component where I need to fetch data using an ajax call. The component is being called correctly and the data is returned in the ajax call, but I am struggling to 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>

I'm wondering if this is something that can be achieved. How can I properly set the data last from the ajax call within the mounted method?

javascript vue.js

Answer 1

Answer №1

The this variable within the then function does not refer to the same context as your component, as in JavaScript, the this keyword is bound to its parent function.

To learn more about this concept, you can visit this link and see an example here.

To resolve this issue, there are a few methods you can use:

1 - Utilize the bind method of the Function prototype to bind the external this with the 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 - Employ ES6 arrow functions (which will achieve the same result 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);
});

Answer 2

The this variable within the then function does not refer to the same context as your component, as in JavaScript, the this keyword is bound to its parent function.

To learn more about this concept, you can visit this link and see an example here.

To resolve this issue, there are a few methods you can use:

1 - Utilize the bind method of the Function prototype to bind the external this with the 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 - Employ ES6 arrow functions (which will achieve the same result 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);
});

Answer 3

Answer №2

The issue lies with the usage of this in your .then(response) function. Dealing with this can be a complex concept, even for seasoned developers at times. Here's the root cause:

When you try to assign a value to a data property on the Vue component using this, you are actually referencing the axios.get() function rather than the component data. This happens because this is bound to the object or scope where it was called (the 'call-site'). Therefore, using this inside the function attempts to set a property that doesn't exist.

Possible solutions: Following the previous suggestion, chaining .bind(this) at the end of the promise may resolve this issue.

Another approach could be to use var that = this; to bind it within the mounted scope:

mounted: function() {
const that = this;

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

Answer 4

The issue lies with the usage of this in your .then(response) function. Dealing with this can be a complex concept, even for seasoned developers at times. Here's the root cause:

When you try to assign a value to a data property on the Vue component using this, you are actually referencing the axios.get() function rather than the component data. This happens because this is bound to the object or scope where it was called (the 'call-site'). Therefore, using this inside the function attempts to set a property that doesn't exist.

Possible solutions: Following the previous suggestion, chaining .bind(this) at the end of the promise may resolve this issue.

Another approach could be to use var that = this; to bind it within the mounted scope:

mounted: function() {
const that = this;

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

implementing data in a single component using vue.js

Answer №1

Answer №2

Similar questions

unable to clear form fields after ajax submission issue persisting

Unable to subscribe due to the return value being an AnonymousSubject rather than an Observable

When using a custom AJAX function, make sure that bindings are functioning properly when setting properties within a callback in Ember

In Redux, it is possible to add characters to an array but for some reason the remove action does not successfully reach the reducer

Is there a way to apply an event function after adding elements through append?

What is the process for storing form data into a text file?

Refreshing select2 dropdown options dynamically with AJAX updates

Executing HTTP Requests for Elements in an Array using JavaScript

How can I create a dropdown menu that is dependent on another dropdown menu using Ajax in my Laravel application?

transforming JSON information into tables on a webpage

Executing JavaScript functions when a browser tab is closed

Guide for utilizing a table value as a parameter in a mySQL query with PHP

What is the best way to transmit a response using JSON instead of Jade?

Indentation differences between PHP and JavaScript

What is the best way to create a mirrored effect for either a card or text using CSS

Accessing and playing audio files from Amazon S3 within Python code

Customizing Vue: Implementing an automatic addition of attributes to elements when using v-on:click directive

typescript: Imported modules in typescript are not functioning

Access the configuration setting in the plugin settings for retrieving sales channel information

Tips for showcasing the latter portion of text within an HTML select dropdown menu