无法获取要显示的 JSON 数据。我正在接收数据。尝试从 JSON 中获取两个字段并将其放入 v-data-table 中。在它的当前形式中,表格生成并且正确的行数出现在记录数中,但每一行都是空白的。
JSON数据的一个例子:
"records": [{
"id": "recFWwl9WYekKQhy5",
"fields": {
"Date": "2020-03-28T04:35:00.000Z",
"Client": [
"reciiW7xvFNJNb4yF"
],
"Details": "Testing",
"Town": "madfa"
},
"createdTime": "2020-03-25T04:35:16.000Z"
}]
}
和代码:
<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>