I am looking to showcase array data within a .vue file, but I am uncertain about the process. This is my attempt:
<template>
<div id="app">
<table class="table table-striped">
<thead>
<tr>
<th>Project Name</th>
<th>Type</th>
</tr>
</thead>
<tfoot>
<tr v-for="user in info">
<th>{{ user.data.user.assigned_projects.name }}</th>
<th>{{ user.data.user.assigned_projects.type }}</th>
</tr>
</tfoot>
</table>
</div>
</template>
<script>
import axios from 'axios'
export default {
el: '#app',
data() {
return {
info: null
}
},
mounted() {
axios
.get('http://api_url')
.then((response) => {
this.info = response.data
})
}
}
</script>
Below is an illustration of an API response example:
{
"response":{
"error":{
"error_code":0,
"error_msg":"",
"msg":""
},
"data":{
"user":{
"id":1,
"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6a3aba7afaa86a7a2a2b4a3b5b5e8a5a9ab">[email protected]</a>",
"first_name":null,
"last_name":null,
"photo_url":null,
"organisation":null,
"own_projects":[
],
"assigned_projects":[
{
"id":10,
"name":"test project",
"description":"cool stuff",
"image_url":"http://image_url",
"timezone":"UTC",
"owner":15,
"created_by":15,
"created_at":"2019-02-26 16:37:03",
"updated_at":"2019-02-26 16:37:03",
"pivot":{
"user_id":1,
"project_id":10
}
},
{
"id":8,
"name":"test project 2",
"description":"",
"image_url":"",
"timezone":"UTC",
"owner":15,
"created_by":15,
"created_at":"2019-02-21 18:36:55",
"updated_at":"2019-02-21 18:36:55",
"pivot":{
"user_id":1,
"project_id":8
}
}
]
}
}
}
}