props in components does not work interface - Nuxt and Vuejs

Question

I can't work an object's interface inside a component using props.

Does anyone know how I can make it work?

PortariaInterface

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

Template

<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
    }
  }
})

Component

<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']
})

Error

TypeError: Cannot read properties of undefined (reading 'numero')

Boussadjra Brahim · Accepted Answer · 2022-01-15 07:53:53Z

1

In this case you have two binding which should be done using v-model directive on your Formulario component as follows :

 <Formulario v-model="formulario" />

in this component bind the input using value and @input event:

<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)
  }
}
})

answered Jan 15, 2022 at 7:53

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

marcelo.delta Over a year ago

The example was with only the number field. But there are more fields that make up the json data. For example: number, date, title, etc. It would not be good practice to create a component for each input field.

Collectives™ on Stack Overflow

props in components does not work interface - Nuxt and Vuejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related