I am having trouble accessing an object's interface within a component using props.
Is there anyone who can provide guidance on how to resolve this issue?
PortariaInterface
define interface PortariaInterface {
entryDate: string
nfe?: {
number: string
}
Template
<Form :data="data" />
Ts
import {PortariaInterface} from '@/models/PortariaInterface'
import { Form } from '@/components/portaria'
export default Vue.extend({
name: 'HomePage',
components: { Form },
layout: 'portaria',
data() {
return {
data: {} as PortariaInterface
}
}
})
Component
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="4">
<el-form-item label="NFe Number">
<el-input v-model="data.nfe?.number"></el-input>
</el-form-item>
</el-col>
export default Vue.extend({
name: 'Form',
props: ['data']
})
Error
TypeError: Cannot read properties of undefined (reading 'number')