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

Updating the object in router.get and res.render in Node.js and Express after loading

Modify the contents of an array within a string using JavaScript

Obtaining a button from a dialog in Google Apps

Error: Unable to access the 'prototype' property of an undefined object (inherits_browser.js)

What steps can I take to ensure that the v-main element occupies at least 70% of the viewport height in Vuetify?

Pause the ajax response using jQuery

JavaScript quiz featuring randomized questions with selectable radio buttons

Unable to save cookies on mobile browsers, but functioning properly on desktop computers

JavaScript's Selenium WebDriver - Explicit Waiting

Implementing Event Listeners in Vue 3.0: A Guide to Attaching to the Parent Element

Guide to utilizing the importcss plugin in TinyMCE Version 4.0.10: Troubleshooting content_css loading issue and resolving style dropdown display problem

How can I preserve the file extension of an ejs file as .html?

How can I extract the text within an element based on the position of the

Creating an 8-bit grayscale JPEG image using HTML5 and encoding it from a canvas source

Utilizing NextJS to retrieve cookie data within React components

"Update data on a webpage using Javascript without the need to refresh the

The AJAX request is failing to reach the server

Running the `npm run build` command excludes the `.cache` folder from the `

Steps for making a cookie in Node.js using Socket.IO

What exactly does the context parameter represent in the createEmbeddedView() method in Angular?