[Vuejs]-Vue 2 v-for not working after loading json with axios

by

0👍

See the homepage for axios. Under the "Response Schema" section they provide what a response looks like. Specifically for data, it’s

{
  // `data` is the response that was provided by the server
  data: {}

  < ... omitted for brevity ... >
}

Please check again what your backend is returning or is supposed to return. Log the whole response you get.
The this.drivers = response.data.data; seems to be incorrect, however the this.drivers = response.data; should work.

You didn’t say which version of axios you are using or show your configuration so I’m using the following for an example:
axios = ^0.21.1
vue-axios = ^3.2.4

Replaced "name" with "title" to match the response format below:

 {
    "title": "delectus aut autem",

      < ... omitted for brevity ... >
  },

—

loadDrivers: function(){
  Vue.axios.get('https://jsonplaceholder.typicode.com/todos')
      .then(
          (response) => {
            this.drivers = response.data; // <<-- works and many task titles are shown on page
            // this.drivers = response.data.data; // <<-- DOES NOT WORK LIKE FOR YOU, blank page
            console.log(this.drivers);
          }
      )
      .catch(function(error){
        console.log(error);
      });
  // console.log(this.drivers);
}

Leave a comment