vuetify v-data-table-server 不显示来自服务器的数据

Question

我对 vue 和 vuetify 还很陌生。我正在尝试显示从服务器检索的数据。 从表中可以看出，表头是正确的。对服务器的请求完成并返回一个数组。然后，我将响应中的 json 数组分配给 serverItems，但什么也没有发生。加载动画也永远不会关闭。我的猜测是我做错了与反应性或变量范围相关的事情，但我无法弄清楚。

我的桌子上有：

 <v-data-table-server :headers="headers"
                      :items="serverItems"
                      :items-length="totalItems"
                      :loading="loading"
                      item-value="Platform"
                      @update:options="loadItems"></v-data-table-server>

在我的脚本中我有：

<script setup>
    import { ref } from 'vue'
    let loading = false;
    let itemsPerPage = 20;
    const headers = [
        {
            title: 'Platform',
            align: 'start',
            sortable: false,
            key: 'Platform',
        },
        { title: 'Title', key: 'Title', align: 'end' },
        { title: 'Release Date', key: 'Release Date', align: 'end' },
        { title: 'Publisher', key: 'Publisher', align: 'end' },
        { title: 'Developer', key: 'Developer', align: 'end' }
    ];
    const serverItems = [];
    let totalItems = 1;

    const loadItems = async ({ page, itemsPerPage, sortBy }) => {
        loading = true

        fetch('https://localhost:7201/api/data/GetItems', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                page: page,
                itemsPerPage: itemsPerPage,
                sortBy: sortBy

            })
        }).then((response) => {
            return response.json();
        }).then((data) => {
            serverItems.push(data);
            totalItems = data.length;
            loading = false;
        }).catch(error => {
            console.error(error);
        });


    }
</script>

服务器的响应如下：

[
    {
        "Platform": "GameCube",
        "Title": "SSX 3",
        "Release Date": "Oct 21, 2003",
        "Publisher": "Electronic Arts",
        "Developer": "EA Sports",
        "Genre": "",
        "Added Date": "Nov 29, 2020",
        "Value": 13.8,
        "Description": "SSX 3 allows gamers t.....",
        "Release Year": 2003,
        "Series": "SSX"
    },
.....

]

Answer 1

尝试使用

ref

:

使你的状态具有反应性

   let loading = ref(false);
    let itemsPerPage = ref(20);
...
  const serverItems = ref([]);
  const totalItems = ref(1);

 ...

serverItems.value = data
totalItems.value = data.length;
loading.value = false;