I'm facing an issue while working on a Vue project with typescript. The v-data-table component in my Schedule.vue file is not rendering as expected. Instead, all I can see is the image below:
https://i.sstatic.net/AvjwA.png
Despite searching extensively online, I have been unable to find a solution to this problem. At this point, I am considering starting over with a new project.
Below is the content of my Schedule.vue file:
<template>
<div>
<v-container>
<v-row>
<v-col>
<v-data-table :headers="daoHeaders" :items="daoItems" :items-per-page="5" class="elevation-1">
<v-toolbar-title>{{ dsTitle }}</v-toolbar-title>
</v-data-table>
</v-col>
</v-row>
<v-row>
<v-col>
This is below the table
</v-col>
</v-row>
</v-container>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
daoHeaders: [
{ title: 'Sport', key: 'sportName', align: 'start', sortable: true },
{ title: 'League', key: 'leagueName' },
{ title: 'Grade Level', key: 'gradeLevel' }
],
daoItems: [
{ sportName: 'Basketball', leagueName: 'Spring Basketball League', gradeLevel: '6-12' }
],
dsTitle: 'This is my Title'
}
},
methods: {
}
});
</script>Next, let's take a look at my index.ts file:
/**
* plugins/index.ts
*
* Automatically included in `./src/main.ts`
*/
// Plugins
import { loadFonts } from './webfontloader'
import vuetify from './vuetify'
import router from '../router'
// Types
import type { App } from 'vue'
export function registerPlugins (app: App) {
loadFonts()
app
.use(vuetify)
.use(router)
}/**
* main.ts
*
* Bootstraps Vuetify and other plugins then mounts the App`
*/
// Components
import App from './App.vue'
// Composables
import { createApp } from 'vue'
// Plugins
import { registerPlugins } from '@/plugins'
const app = createApp(App)
registerPlugins(app)
app.mount('#app')Lastly, here is an overview of my tsconfig.json file:
{
"compilerOptions": {
"baseUrl": ".",
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"noEmit": true,
"paths": {
"@/*": [
"src/*"
]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/main.ts"],
"references": [{ "path": "./tsconfig.node.json" }],
"exclude": ["node_modules"]
}