Vue3+Vuetify vTable组件渲染异常问题排查求助

基于CDN引入Vue3和Vuetify编写代码，使用vTable组件（非实验室版v-data-table）展示数据时表格无法正常渲染，控制台出现以下错误：

• [Vue warn]: Property "item" was accessed during render but is not defined on instance.
• [Vue warn]: Unhandled error during execution of render function
• Uncaught TypeError: Cannot read properties of undefined (reading 'name')

经检查，desserts数据已正常传递到应用中；将vTable替换为原生HTML table时，功能完全正常，已排除WordPress脚本冲突的可能。

原代码如下：

JavaScript代码 #

const { createApp, computed, ref, reactive } = Vue;
const { createVuetify } = Vuetify;
const vuetify = createVuetify();
const app = createApp({
    setup() {
        const desserts = ref([{
            name: 'Frozen Yogurt',
            calories: 159,
        }, {
            name: 'Ice cream sandwich',
            calories: 237,
        }, {
            name: 'Eclair',
            calories: 262,
        }, {
            name: 'Cupcake',
            calories: 305,
        }, {
            name: 'Gingerbread',
            calories: 356,
        }, {
            name: 'Jelly bean',
            calories: 375,
        }, {
            name: 'Lollipop',
            calories: 392,
        }, {
            name: 'Honeycomb',
            calories: 408,
        }, {
            name: 'Donut',
            calories: 452,
        }, {
            name: 'KitKat',
            calories: 518,
        },])

        return {
            desserts
        }
    }
});
app.use(vuetify).mount('#app');

HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/3.3.19/vuetify.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/vuetify@3.3.17/dist/vuetify.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        <p>table below this point</p>
        <v-table>
            <thead>
                <tr>
                    <th class="text-left">URL</th>
                    <th class="text-left"></th>
                </tr>
            </thead>
           <tbody>
                <tr v-for="item in desserts" :key="item.name">
                    <td class="url">{{ item.name }}</td>
                    <td class="title">{{ item.calories }}</td>
                </tr> 
            </tbody> 
        </v-table>
        <p>table over this point</p>
    </div>
</body>
</html>

原因分析 #

Vuetify的v-table并非原生table的简单封装，它有独立的内部DOM结构和插槽机制。直接在v-table内部手动编写<tbody>和v-for循环的方式不符合组件规范：

• v-table会自动生成表格主体结构，手动添加的<tbody>会被组件内部逻辑干扰，导致item变量不在正确的渲染作用域内，触发未定义报错。

解决办法 #

正确利用v-table的插槽系统或属性来渲染数据，以下是两种可行方案：

方案1：使用默认插槽自定义行内容 #

通过#default插槽包裹自定义的tbody和行内容，确保变量作用域正确：

<div id="app">
    <p>table below this point</p>
    <v-table>
        <thead>
            <tr>
                <th class="text-left">名称</th>
                <th class="text-left">热量</th>
            </tr>
        </thead>
        <template #default>
            <tbody>
                <tr v-for="item in desserts" :key="item.name">
                    <td class="url">{{ item.name }}</td>
                    <td class="title">{{ item.calories }}</td>
                </tr>
            </tbody>
        </template>
    </v-table>
    <p>table over this point</p>
</div>

方案2：使用items属性（符合Vuetify组件规范） #

通过items属性绑定数据源，配合v-table-column定义列，无需手动编写表格结构：

<div id="app">
    <p>table below this point</p>
    <v-table :items="desserts">
        <v-table-column title="名称" data-key="name"></v-table-column>
        <v-table-column title="热量" data-key="calories"></v-table-column>
    </v-table>
    <p>table over this point</p>
</div>

若需要自定义列内容，可使用v-table-column的插槽：

<v-table-column title="名称">
    <template #default="{ item }">
        <span class="url">{{ item.name }}</span>
    </template>
</v-table-column>

额外注意事项 #

• 统一Vuetify的JS和CSS版本（原代码中JS为3.3.19，CSS为3.3.17，版本不一致可能引发兼容性问题）

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