Can't get the JSON data to display. I'm receiving the data. Trying to take two of the fields from the JSON and put it in a v-data-table. In it's current form, the table generates and the correct # of rows appears for the # of records, but each row is blank.
An example of the JSON data:
"records": [{
"id": "recFWwl9WYekKQhy5",
"fields": {
"Date": "2020-03-28T04:35:00.000Z",
"Client": [
"reciiW7xvFNJNb4yF"
],
"Details": "Testing",
"Town": "madfa"
},
"createdTime": "2020-03-25T04:35:16.000Z"
}]
}
And the code:
<template>
<v-data-table
:headers="headers"
:items="items"
:items-per-page="5"
class="elevation-1"
>
<template v-slot:item="props">
<tr>
<td>{{new Date(props.item.Date).toLocaleString()}}</td>
<td>{{ props.item.Client }}</td>
<td>{{ props.item.Details }}</td>
</tr>
</template>
</v-data-table>
</template>
<script>
import axios from 'axios'
export default {
components: {},
computed: {},
data() {
return {
headers: [
{
text: 'Date',
align: 'start',
sortable: true,
value: 'Date',
},
{ text: 'Client Name', value: 'Client' },
{ text: 'Details', value: 'Details' },
],
items: []
}
},
mounted() {
this.loadItems();
},
methods: {
loadItems() {
// Init variables
var self = this
var app_id = "appID";
var app_key = "key";
this.items = []
axios.get(
"https://api.airtable.com/v0/"+app_id+"/openrideAppointments",
{
headers: { Authorization: "Bearer "+app_key }
}
).then(function(response){
self.items = response.data.records.map((item)=>{
return {
id: item.id,
...item.fields
}
})
}).catch(function(error){
console.log(error)
})
}
}
}
</script>
The Airtable API response has the values inside fields, so you should flatten the response...
self.items = response.data.records.map((item)=>{
return {
id: item.id,
...item.fields
}
})
And make sure you're using the correct Vuetify 2.x slot template...
<template v-slot:item="props">
<tr>
<td>{{ props.item.Date }}</td>
<td>{{ props.item.Client }}</td>
<td>{{ props.item.Details }}</td>
</tr>
</template>