Vue.js Vuetify:使用插槽时初始表排序不起作用？

在我使用的

：sort by:sync

和

：sort-desc.sync

中有一些数据表，它们工作得非常好。我在下面有一个数据表，我正在使用插槽，数据表没有排序。我在控制台中收到警告，表示属性

total

未在渲染中引用

<v-data-table
        id="paid-orders-data-table"
        :headers="headers"
        :items="items"
        :hide-default-footer="true"
        :sort-by:sync="total"
        :sort-desc.sync="sortDesc"
    >
        <template v-slot:body="{ items }">
            <tbody>
                <tr v-for="(item, index) in items" :key="index">
                    <td>{{ item.name }}</td>
                    <td>${{ item.total }}</td>
                </tr>
            </tbody>
        </template>

---

它应该是

：sort by.sync=“total”

，而不是

：sort by:sync=“total”

（同步前注意冒号）。此外，

总计

部分应定义为变量。因此，Vue尝试查找不存在的

total

变量，并抛出您看到的错误

...

data（）{
返回{
...
糟糕的是：“总数”，
标题：[……]
项目：[……]
};
}

---

这是一个工作示例。

感谢您的解释……感谢您花时间给出一个工作代码示例！别担心！如果你发现这个答案是有用的或任何答案在这里，请考虑通过点击复选标记。这向更广泛的社区表明，你已经找到了一个解决方案，并给回答者和你自己带来了一些声誉。没有义务这样做。祝你好运，伙计。当然，完成了。对不起，过去两天我只是忙着工作——再次感谢！

  data() {
        return {
            sortDesc: true,
            headers: [
                {
                    text: 'Customer',
                    sortable: false,
                    value: 'name',
                },
                {
                    text: 'Total',
                    value: 'total'
                },
            ],
            items: []
        }
    },