组件中的props不能在接口上工作-Nuxt和Vuejs

Question

我无法使用道具在组件内处理对象的接口。

有人知道我该怎么做吗？

PortariaInterface

export interface PortariaInterface {
dataEntrada: string
nfe?: {
numero: string
}

模板

<Formulario :formulario="formulario" />

Ts

import {PortariaInterface} from '@/models/PortariaInterface'
import { Formulario } from '@/components/portaria'
export default Vue.extend({
name: 'IndexPage',
components: { Formulario },
layout: 'portaria',
data() {
return {
formulario: {} as PortariaInterface
}
}
})

组件

<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="4">
<el-form-item label="Número NFe">
<el-input v-model="formulario.nfe?.numero"></el-input>
</el-form-item>
</el-col>
export default Vue.extend({
name: 'Formulario',
props: ['formulario']
})

错误

TypeError:无法读取未定义(读取'numero'(的属性

Answer 1

在这种情况下，您有两个绑定，应该在Formulario组件上使用v-model指令完成，如下所示：

<Formulario v-model="formulario" />

在该组件中，使用value和@input事件绑定输入：

<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="4">
<el-form-item label="Número NFe">
<el-input :value="numero" @input="onInput"></el-input>
</el-form-item>
</el-col>
export default Vue.extend({
name: 'Formulario',
props: ['value'],
computed:{
numero(){
return this.value.nfe?.numero
}
},
methods:{
onInput(val){
this.$emit('input',val)
}
}
})