I am new to Vuejs and encountered an issue while trying to display user information retrieved from API endpoints using axios. Below is the code snippet for fetching data:
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);
},
}
}
I have successfully stored the data in the userInfo array, which includes username, userId, etc. How can I display these contents in tabular form within the template section of my VueJS component?
If the following schema represents my table structure in the HTML part of VueJS template, how do I populate the rows with data fetched from the API endpoint through userInfo?
<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 code above creates a column, but I need assistance on populating it with rows based on the userInfo array, specifically displaying usernames under the "Name" column.
While I've managed to display the list of usernames as a bullet list with the following code:
<ul id="displaying">
<li v-for="user in userInfo" :key="userInfo.id">{{user.username}}
</li></ul>
I'm now looking for guidance on how to represent these usernames in a tabular format under the mentioned "Name" column.
Your help would be highly appreciated.