CODEWITHSUNDEEP
vue.jsaxioselement-ui
skate_23
skate_23

Reputation: 487

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

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?

<el-table>
  <el-table-column min-width="50" type="index"></el-table-column>
  <el-table-column min-width="150" label="Name"></el-table-column>
</el-table>

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:

<ul id="dsiplaying">
    <li v-for="user in userInfo" :key="userInfo.id">{{user.username}}
</li></ul>

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

Any help would be appreciated.

Upvotes: 2

Views: 3107

Answers (1)

Phil
Phil

Reputation: 164731

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

<el-table :data="userInfo"> <!-- 👈 bind the table's "data" prop to your "userInfo" array -->

  <!-- this is an index column, ie row number starting from "1" -->
  <el-table-column type="index" min-width="50"></el-table-column>

  <!-- this column shows the "id" property of your objects -->
  <el-table-column prop="id" label="ID"></el-table-column>

  <!-- this column shows the "username" property of your objects -->
  <el-table-column prop="username" label="Username"></el-table-column>
</el-table>

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

<table>
  <thead>
    <tr>
      <th></th>
      <th>ID</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(user, index) in userInfo" :key="user.id">
      <td>{{ index + 1 }}</td>
      <td>{{ user.id }}</td>
      <td>{{ user.username }}</td>
    </tr>
  </tbody>
</table>

Upvotes: 3

Related Questions