Question

尝试将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>

Answer 1

道具“ items”的
类型检查失败。预期的数组，有对象。

这是什么意思。只要响应的类型为Datatable，array就可以使用从Promise返回的数据。您的承诺将返回object。

如果我不是尝试显示动态数据，而是尝试显示静态定义的对象（“ staticitems”），则该应用程序可以正常工作。

staticitems不是对象。它是一个对象数组。数组显示如下：[]和对象{}

您需要确保从API返回的响应是一个数组。我从您的API调用中创建了一个简单的example，以向您显示正确的响应格式。如您所见，info现在是一个数组，datatable正常工作。

处理Vuetify数据表中的承诺

1 个答案: