обрабатывать обещания в таблицах данных Vuetify - PullRequest
Новая
       24

обрабатывать обещания в таблицах данных Vuetify

0 голосов
/ 29 апреля 2019

У меня проблема при попытке вставить ответ на вызов API (я использую axios) в таблицу данных vue.Если я вручную напишу HTML-таблицу следующим образом: 

<table style="width:100%">
            <tr>
                <th v-for="(item, n) in headers" v-bind:key="n">{{item.text}}</th>
            </tr>
            <tr v-for="(item, n) in info" v-bind:key="n">
                <td>{{ item.code }}</td>
                <td>{{ item.symbol }}</td>
                <td>{{ item.rate }}</td>
                <td>{{ item.description }}</td>
                <td>{{ item.rate_float }}</td>
            </tr>
        </table>

, код работает и отображает некоторые данные.Но когда я пытаюсь использовать таблицу данных Vuetify следующим образом: 

<v-data-table
                app
                :headers="headers"
                :items="info"
                class="elevation-2"
        >
            <template v-slot:items="props">
                <td>{{ props.item.code }}</td>
                <td>{{ props.item.symbol }}</td>
                <td>{{ props.item.rate }}</td>
                <td>{{ props.item.description }}</td>
                <td>{{ props.item.rate_float }}</td>
            </template>
        </v-data-table>

, выдается следующее предупреждение: 

webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:620 [Vue warn]: Invalid prop: type check failed for prop "items". Expected Array, got Object 

found in

---> <VDataTable>
       <ApiExample> at src/views/ApiExample.vue
         <VContent>
           <VApp>
             <App> at src/App.vue
               <Root>

Приводит к этой ошибке: 

webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1887 TypeError: this.items.map is not a function
    at VueComponent.items (webpack-internal:///./node_modules/vuetify/dist/vuetify.js:21511)
    at Watcher.run (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4556)
    at flushSchedulerQueue (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4298)
    at Array.eval (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1979)
    at flushCallbacks (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1905)

Приложение работает, если вместо попытки воспроизвести динамические данные я пытаюсь отобразить статически определенный объект ("staticitems").По моему мнению, проблема заключается в том, что таблица данных ожидает массив, но вместо этого она находит Promise, поэтому она падает.Ниже приведен полный код приложения.

<template>
    <v-container fluid>
        <table style="width:100%">
            <tr>
                <th v-for="(item, n) in headers" v-bind:key="n">{{item.text}}</th>
            </tr>
            <tr v-for="(item, n) in info" v-bind:key="n">
                <td>{{ item.code }}</td>
                <td>{{ item.symbol }}</td>
                <td>{{ item.rate }}</td>
                <td>{{ item.description }}</td>
                <td>{{ item.rate_float }}</td>
            </tr>
        </table>
        <v-data-table
                app
                :headers="headers"
                :items="info"
                class="elevation-2"
        >
            <template v-slot:items="props">
                <td>{{ props.item.code }}</td>
                <td>{{ props.item.symbol }}</td>
                <td>{{ props.item.rate }}</td>
                <td>{{ props.item.description }}</td>
                <td>{{ props.item.rate_float }}</td>
            </template>
        </v-data-table>
    </v-container>
</template>

<script>
    import axios from 'axios'

    export default {
        name: "ApiExample",
        data() {
            return {
                info: [],
                info2: [],
                headers: [
                    {text: 'code', value: 'code'},
                    {text: 'symbol', value: 'symbol'},
                    {text: 'rate', value: 'rate'},
                    {text: 'description', value: 'description'},
                    {text: 'rate_float', value: 'rate_float'},
                ],
                staticitems: [
                    {
                        code: "USD",
                        symbol: "$",
                        rate: "5,247.0417",
                        description: "United States Dollar",
                        rate_float: "5247.0417"
                    }
                ]
            }
        },
        mounted() {
            axios
                .get('https://api.coindesk.com/v1/bpi/currentprice.json')
                .then(response => (this.info = response.data.bpi))
                .catch(error => console.error(error))
        }
    }
</script>

<style scoped>

</style>

1 Ответ

0 голосов
/ 29 апреля 2019

проверка типа не удалась для "предметов". Ожидаемый массив, получил объект.

Это то, что это значит. Datatable подходит для использования данных, возвращаемых из обещаний, если тип ответа - array. Ваше обещание возвращает object.

Приложение работает, если вместо отображения динамических данных я пытаюсь отобразить статически определенный объект ("staticitems").

staticitems не является объектом. Это массив объектов. Массивы отображаются так: [] и объекты вроде {}

Вам необходимо убедиться, что ответ, возвращаемый из API, является массивом. Я создал простой пример из вашего вызова API, чтобы показать вам правильный формат вашего ответа. Как видите, info теперь является массивом, а datatable работает нормально.

...