Axios Get Api Call Causing Unexpected Behaviour

My CodePen below is a working example of what should be happening. Everything there is working as expected. I am using hard coded data there. CodePen: https://codepen.io/anon/pen/

Solution 1:

In your demo, calling select() asserts the "Select All" feature (checking all checkboxes), but those checkboxes aren't available until getData() resolves, so just move select() after getData():

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

demo

Solution 2:

While using axios inside your vue js application, you are using 'this' keyword inside axios which makes it confusing for compiler to which object your are trying to refer axios or vue, so to solve this problem try below 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)
  }

Hope this solves your problem.