在Vuetify数据表中处理承诺

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)

如果我尝试显示一个静态定义的对象(“静态项”)，而不是尝试播放动态数据，应用程序就能工作。在我看来，问题在于数据表期待的是一个数组，但是它找到了一个承诺，所以它崩溃了。下面是应用程序的完整代码。

<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

键入检查失败的道具“项目”。预期阵列，找到目标了。

这就是它的意思。Datatable可以使用承诺返回的数据，只要响应类型是array。你的承诺是归还一个object。

如果我尝试显示一个静态定义的对象(“静态项”)，而不是尝试播放动态数据，应用程序就能工作。

静态项不是对象。它是一个对象数组。数组的显示方式如下：[]和像{}这样的对象

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