Unexpected Behavior Arises from Axios Get API Request

Question

Unexpected Behavior Arises from Axios Get API Request

Below is a functional example in my CodePen showing what should be happening. Everything is working as intended with hard coded data.

CodePen: https://codepen.io/anon/pen/XxNORW?editors=0001

Hard coded data:

info:[
{
    "id": 1,
    "title": "Title one",
    "category_data": {
        "2": "Team",
        "7": "Queries"
    }
}
],

Issue:

However, when I replace the hard coded data with an AXIOS get call, the checkboxes in the CodePen do not work as expected. The All checkbox gets checked correctly, but the others do not.

I suspect that the slight delay in loading the API could be the reason for this behavior.

mounted() {
   this.getData(); 
},
methods: {
    getData: function() {
      axios
       .get('https://EXAMPLE.com/API/')
      .then(response => {
        this.info = response.data
        this.dataReady = true
      })
      .catch(error => {
        console.log(error)
       this.errored = true
  })
       .finally(() => this.loading = false)
    }
},

I ensure that the front-end is only rendered once the data is ready.

Is there a way to resolve this issue?

Thank you.

javascript vue.js vuejs2 axios

Answer 1

Answer №1

During the demonstration, using select() activates the "Select All" feature (checking all checkboxes), however, these checkboxes are not yet available until after getData() is completed. To resolve this issue, simply move the select() function to execute after getData():

async mounted() {
  await this.getData();
  this.select();
},
methods: {
  async getData() {
    const {data} = await axios.get(/* URL TO API DATA */);
    this.info = data;
  },
  // ...
}

See demo in action

Answer 2

During the demonstration, using select() activates the "Select All" feature (checking all checkboxes), however, these checkboxes are not yet available until after getData() is completed. To resolve this issue, simply move the select() function to execute after getData():

async mounted() {
  await this.getData();
  this.select();
},
methods: {
  async getData() {
    const {data} = await axios.get(/* URL TO API DATA */);
    this.info = data;
  },
  // ...
}

See demo in action

Answer 3

Answer №2

When incorporating Axios into your Vue.js application, the use of the 'this' keyword within Axios can lead to confusion for the compiler in determining which object you are referring to - Axios or Vue. To address this issue, consider implementing the following code:

getData: function() {
   let app = this;
  axios
   .get('https://EXAMPLE.com/API/')
  .then(response => {
    app.info = response.data
    app.dataReady = true
  })
  .catch(error => {
    console.log(error)
   app.errored = true
  })
   .finally(() => app.loading = false)
  }

This approach should help resolve any confusion.

Answer 4

When incorporating Axios into your Vue.js application, the use of the 'this' keyword within Axios can lead to confusion for the compiler in determining which object you are referring to - Axios or Vue. To address this issue, consider implementing the following code:

getData: function() {
   let app = this;
  axios
   .get('https://EXAMPLE.com/API/')
  .then(response => {
    app.info = response.data
    app.dataReady = true
  })
  .catch(error => {
    console.log(error)
   app.errored = true
  })
   .finally(() => app.loading = false)
  }

This approach should help resolve any confusion.

Unexpected Behavior Arises from Axios Get API Request

Answer №1

Answer №2

Similar questions

"Material-Table does not have the ability to insert a new row

When executing a function, the previous React state continues to linger

Triggering transitionend event once with an added if condition

Issues with sending data through ajax using the post method persist on shared web hosting

Image Placement Based on Coordinates in a Graphic Display

differences in opinion between JavaScript code and browser add-ons/extensions

I'm encountering an issue with automatically updating content on a webpage

What is the best way to manage communication with a database in a Node.js application?

Error encountered while making a REST API call in Ajax: Unforeseen SyntaxError: Colon unexpected

Customize the appearance of radio buttons in HTML by removing the bullets

Assign the output of a function to a variable

Employing a "cross-domain" approach to serve as a login gateway for a different domain

Tips for adjusting the close date based on the selected date in a dropdown datepicker

Determining special characters within a string using VueJS

The error middleware in Express is not defined

The useNavigate() function seems to be failing to redirect to the '/protected' route

VueJS fails to display table information

Is there a way to determine if a table cell contains overflowing text compared to another cell?

Adjusting the settimeout delay time during its execution

Encountering the error message 'XMLHttpRequest is not defined' while incorporating getServerSideProps() in NextJS