JSON данные не отображаются в Vuetify v-data-table с помощью Axios - PullRequest
Новая
       38

JSON данные не отображаются в Vuetify v-data-table с помощью Axios

1 голос
/ 25 марта 2020

Невозможно получить данные JSON для отображения. Я получаю данные. Попытка взять два поля из JSON и поместить их в таблицу v-data. В своем текущем виде таблица генерирует и отображается правильное количество строк для количества записей, но каждая строка пуста.

Пример данных 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>

Ответы [ 2 ]

2 голосов
/ 25 марта 2020

Ответ 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

1 голос
/ 25 марта 2020

На основании этого 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>
...