使用 Axios 在 Vuetify v-data-table 中未显示 JSON 数据

Question

无法获取要显示的 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>

Answer 1

基于此answer 格式化一列，但如果您想格式化多列，您应该执行以下操作：

 <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>

Answer 2

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>

演示：https://codeply.com/p/gdv5OfRlOL