Vuetify v-data-table-server无法展示服务器返回数据问题解决

我是Vue和Vuetify新手，尝试用v-data-table-server展示服务器返回的数据。表格能正常显示表头，请求服务器可获取数组，但将响应的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"
    },
    // 更多数据项...
]

问题解决：使用响应式ref变量 #

之前错误使用this导致误以为ref无效，将需要响应式更新的变量用ref包裹后问题解决，可行代码如下：

<script setup>
import { ref } from 'vue'

const loading = ref(false);
const itemsPerPage = ref(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 = ref([]);
const totalItems = ref(0);

async function loadItems ({ page, itemsPerPage, sortBy }) {
    loading.value = 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.value = data;
        totalItems.value = data.length;
        loading.value = false;
    }).catch(error => {
        console.error(error);
    });
}
</script>

内容的提问来源于stack exchange，提问作者zu1b