I am struggling with this basic HTML/Vue/Vuetify code snippet below, and I can't seem to get it functioning as intended.
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e484b5b7e0d100d100a">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec9a998998858a95acdfc2dfc2dddb">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8ded7d6ccf88d96c0">[email protected]</a>/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>I am trying to display some data within a simple <v-table></v-table> component (not the <v-data-table> from labs) but it's not rendering properly, throwing errors in the console:
- [Vue warn]: Property "item" was accessed during render but is not defined on instance. at VTable at App
- [Vue warn]: Unhandled error during execution of render function at VTable at App
- Uncaught TypeError: Cannot read properties of undefined (reading 'name')
I have checked that the {{deserts}} property is passed to the app as I can see the array displayed on the page. When I remove the <tr for></tr> loop, the devTool shows the following 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>
I need to resolve this using Vue and Vuetify fetched from a CDN as I'm working on an internal app within a WordPress page. I might have missed something, but I can't figure out what it is since all other components are functioning correctly... Been stuck on this issue for days now, even eliminated conflicts with other WP scripts by testing with a simple JSFiddle.
EDIT: Interestingly, replacing the <v-table> with a plain HTML <table> works perfectly fine... Any insights on why?