I am developing a single page application using Vue.js 3 and Typescript.
The problem affects a view and a single file component. People.vue retrieves data from the backend and displays it in multiple PersonRow.vue components using v-for. Although data property types are explicitly defined, I get a warning in the browser console:
[Vue warn]: Invalid prop: Type check failed for prop "person". Expected Person, got Object
Everything is working fine and I could change the property type in PersonRow.vue to Object to get rid of the warning but I would like to have type checks working correctly.
People.vue
<template>
<div class="container">
<PersonRow v-for="person in people" :key="person.id" :person="person" />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { Person, getPeople } from '../services/person'
import PersonRow from '@/components/PersonRow.vue'
export default defineComponent({
components: {
PersonRow
},
data () {
return {
people: new Array<Person>()
}
},
mounted () {
getPeople().then(
response => {
this.people.push(...response)
})
}
})
</script>
PersonRow.vue
<template>
<div class="row">
<div class="col">{{ person.givenName }}</div>
<div class="col">{{ person.familyName }}</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { Person } from '../services/person'
export default defineComponent({
props: {
person: {
type: Person,
required: true
}
}
})
</script>
person.ts
export class Person {
constructor (id: number, givenName: string, familyName: string) {
this.id = id
this.givenName = givenName
this.familyName = familyName
}
id: number;
givenName: string;
familyName: string;
}
export async function getPeople (): Promise<Person[]> {
const response = await fetch('https://api.example.com/people')
return await response.json() as Person[]
}