以下代码给出错误“在渲染期间访问了属性“item”，但未在实例上定义”。但是当我将其更改为正常时，一切正常。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" />
</head>
<body>
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<div id="app">
<v-table>
<tbody>
<tr v-for="item in routes">
<td>{{item.customerName}}</td>
</tr>
</tbody>
</v-table>
</div>
<script>
const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = createApp({
data: () => ({
routes: [{"id":1,"customerName":"Pietje puk", "orderNumber":"PF-123456789", "zipcode":"5388AA,18"},
{"id":2,"customerName":"van de Graaf", "orderNumber":"TEST", "zipcode":"1234AA"}]
}),
setup() {
const date = ref();
}
});
app.use(vuetify).mount('#app')
</script>
</body>
</html>
我几乎尝试了一切，但似乎没有任何效果。也尝试了不同的版本。看起来这个组件有问题，但我是 Vuetify 的新手，所以也许我的代码中还有其他问题？我们的人工智能朋友无法帮助我;)
您正在使用 Vuetify 版本 2 中的
v-table<v-table>
<template #default>
<tbody>
<tr
v-for="item in routes"
:key="item.id"
>
<td>{{ item.customerName }}</td>
<td>{{ item.orderNumber }}</td>
<td>{{ item.zipcode }}</td>
</tr>
</tbody>
</template>
</v-table>
原因是 Vue 3 使用了与 Vue 2 不同的模板语法，并且一些功能在简单的 HTML 文件中不支持。
使用 Webpack 或 Rollup 等打包工具将代码转换为兼容的格式。
2.就像@Sambal说的，你可以添加一个来实现它。
<v-table>
<template #default>
<tbody>
<tr
v-for="item in routes"
:key="item.id"
>
<td>{{ item.customerName }}</td>
<td>{{ item.orderNumber }}</td>
<td>{{ item.zipcode }}</td>
</tr>
</tbody>
</template>
</v-table>