How do we display the data got from axios in a table in Vuejs?

Question

I am new to Vuejs and I came across an issue while displaying the data/user information retrieved from the API endpoints using axios. Following is the code to retrieve the data from the api endpoints:

import axios from 'axios';

export default {

  data(){
        return{
            userInfo: []
        };
    },

  created(){
      this.getInfo();
  },

  methods:{
    getInfo(){
        axios.get('http://URL')
        .then(response => this.userInfo = response.data)
        .catch(error => this.userInfo = error.data);
    },      
  }  
}

So, I do get the data from the api endpoint into userInfo (which is an array - username, userId, etc). How do I display the contents of the userInfo (which is an array) in the table form in the template section of the vuejs?

If below is a schema of the table I have created in the template (html part) of vuejs? How do I populate the rows with the data from teh userInfo got from the api endpoints?

The above code simply creates a column, but how do I populate it with the rows with the data got in userInfo? UserInfo has the usernames of the users. And I want to populate the rows of the column "Name" with username in userInfo.

I am able to display the user names as a list of usernames on the UI with tht following code:


    {{user.username}}

but, how do I populate the username in table form user the name column created above?

Any help would be appreciated.

user_283366 · Answer

Element UI is, in my opinion, very difficult to use due to its overly cumbersome documentation but if you must...

This will initially render nothing while your userInfo array is empty but once the Axios request completes and updates your array, the table will be populated with data.

If you just wanted to show your data in a plain old HTML table, you would use something like this


  
    
      
      ID
      Username
    
  
  
    
      {{ index + 1 }}
      {{ user.id }}
      {{ user.username }}

How do we display the data got from axios in a table in Vuejs?

1 Answers