我有下面这个非常简单的HTML/Vue/Vutify代码，我似乎无法按预期工作.
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');<!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>我想在SIMPe vTable <v-table></v-table>组件中显示一些数据(不是来自实验室的<v-data-table>).
但是，它会导致一个未呈现的表，并在控制台中显示一些错误:
- [VUE WARN]:属性"Item"在呈现期间被访问，但未在实例上定义.在应用程序的VTable上
- [VUE WARN]:在应用程序的VTable执行呈现函数时出现未处理的错误
- 未捕获的TypeError:无法读取未定义的属性(正在读取‘name’)
我判断了一下，因为我可以在页面上显示数组，所以会向应用程序传递{{egrets}}属性.删除<；tr for>；/tr>；循环时，在devTool中找到的HTML如下所示:
<div id="app" data-v-app="">
<p>table below this point</p>
<div class="v-table v-theme--light v-table--density-default">
<!---->
<div class="v-table__wrapper">
<table>
URL
</table>
</div>
<!---->
</div>
<p>table over this point</p>
</div>
我需要使用Vue和Vutify从CDN抓取的解决方案，因为我只是在WordPress页面上连接一个内部应用程序.我可能有些地方弄错了，但我拿不到，因为其他部件都在工作……我已经被困在这个问题上好几天了，我排除了与从WP加载的任何其他脚本的任何冲突，放上了这个简单的JSFdle.
EDIT:只是为了排除这种情况，用简单的HTML<table>替换<v-table>可以非常好地工作...谁能解释呢？