JSON 使用 Axios 的 Vuetify v-data-table 中未显示数据
JSON data not displaying in Vuetify v-data-table using Axios
无法显示 JSON 数据。我正在接收数据。尝试从 JSON 中取出两个字段并将其放入 v-data-table 中。在其当前形式中,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>
Airtable API 响应的值在 fields
内,因此您应该将响应展平...
self.items = response.data.records.map((item)=>{
return {
id: item.id,
...item.fields
}
})
并确保您使用的是正确的 Vuetify 2.x 插槽模板...
<template v-slot:item="props">
<tr>
<td>{{ props.item.Date }}</td>
<td>{{ props.item.Client }}</td>
<td>{{ props.item.Details }}</td>
</tr>
</template>
基于这个 格式化一列,但是如果你想格式化多列你应该做这样的事情:
<template v-slot:item="props">
<tr>
<td>{{new Date(props.item.fields.Date).toLocaleString()}}</td>
<td>{{ props.item.fields.Client }}</td>
<td>{{ props.item.fields.Details }}</td>
</tr>
</template>
无法显示 JSON 数据。我正在接收数据。尝试从 JSON 中取出两个字段并将其放入 v-data-table 中。在其当前形式中,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>
Airtable API 响应的值在 fields
内,因此您应该将响应展平...
self.items = response.data.records.map((item)=>{
return {
id: item.id,
...item.fields
}
})
并确保您使用的是正确的 Vuetify 2.x 插槽模板...
<template v-slot:item="props">
<tr>
<td>{{ props.item.Date }}</td>
<td>{{ props.item.Client }}</td>
<td>{{ props.item.Details }}</td>
</tr>
</template>
基于这个
<template v-slot:item="props">
<tr>
<td>{{new Date(props.item.fields.Date).toLocaleString()}}</td>
<td>{{ props.item.fields.Client }}</td>
<td>{{ props.item.fields.Details }}</td>
</tr>
</template>