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

Posted 2023-02-22

【中文标题】使用 Axios 在 Vuetify v-data-table 中未显示 JSON 数据

【英文标题】：JSON data not displaying in Vuetify v-data-table using Axios

【发布时间】：2020-07-06 07:17:54

【问题描述】：

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

【问题讨论】：

你使用的是哪个 vuetify 版本？

如果你使用 vuetify v2，试试这个answer

我正在使用 Vuetify 2 - 现在试试你的答案

非常感谢。我现在以漂亮的格式将日期放入相应的日期列中，但是我仍在尝试弄清楚如何将 Client 和 Details 值添加到相应的列中（或根本不显示）。：跨度>

你们俩都很棒 - 更新了最终解决方案。

【参考方案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>

【参考方案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

【讨论】：

谢谢，不过，我添加了这些字段，但仍然无法正常工作。

这不起作用，因为 vuetify v1.x 语法，但是他使用 v2，所以他应该做类似this

这行得通！ Boussadjra 的答案也适用于日期格式（尽管我还没有完全弄清楚）。谢谢！

你们俩都很棒 - 更新了最终解决方案。

@gcubed 你不应该用解决方案更新你的问题，尽量保留原始问题并将解决方案作为答案发布