I've encountered some strange errors and warnings in VS Code while working on my Vue.js project:
https://i.sstatic.net/sjhVZ.png
- Odd errors occur when I pass a value as a prop to one of my custom components, but not with Vuetify components
- The warning only appears on the first prop passed
- It doesn't matter what type or value is passed to the prop
- Despite the warnings, the project compiles without errors and functions properly
- I prefer using the "regular/default" component style over the class-based style
- My project is built with TypeScript
The example image shows how the prop is defined in the child component:
import Vue from 'vue';
export default Vue.extend({
name: 'MyCustomComponent',
props: {
title: String,
},
data: function () {},
});
Is there a way to resolve these "useless" warnings?
Edit
Here are the parent and child component scripts as requested:
App.vue
<template>
<v-app>
<v-main>
<hello-world :title="title" :heading="heading" />
</v-main>
</v-app>
</template>
<script lang="ts">
import Vue from 'vue';
import HelloWorld from './components/HelloWorld.vue';
export default Vue.extend({
name: 'App',
components: {
HelloWorld,
},
data: () => ({
title: 'Title!',
heading: 'Heading!',
}),
});
</script>
HelloWorld.vue
<template>
<v-container>
<v-row class="text-center">
<v-col class="mb-4">
<h1>
{{ title }}
</h1>
<h2>
{{ heading }}
</h2>
</v-col>
</v-row>
</v-container>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'HelloWorld',
props: {
title: String,
heading: String,
},
data: () => ({}),
});
</script>