Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

193
Visualizações
How to integrate a child component into a loop and retrieve the values of the v-model in vue3

For create a generic form with parents/child component , i create this ts file.

 model: "IUser",
 resource: 'users',
 fields: {
   firstname: {
     type: 'text',
     name: 'firstname',
     add: true,
     list: true,
     edit: true,
     label: 'Prenom',
     value: ''
   },
   lastname: {
     type: 'text',
     name: 'lastname',
     add: true,
     list: true,
     edit: true,
     label: 'Nom',
     value: ''
   },  
 }
}

And i called child components into his parent

Parent component


  <el-form
    :model="formData"
    :rules="rules"
  >
  <div v-for="(item, name, index) in models.fields" :key="index">
    name:{{ item.name }} {{ index }}
    <Text 
      v-if="item.type === 'text'"
      :label="item.label"
      v-model="values[index]"
      :ruleName= "item.name"
    />
  </div>
  
  <button @click="SendData()"></button>
  </el-form>

child component

   <div class="col-md-6 fv-row">
    <label class="required fs-6 fw-bold mb-2"
      >{{label}}</label
    >
    <el-form-item :prop="ruleName">  
      <el-input
      v-model="input"
      @input="$emit(`update:${ruleName}`, input)"
    />
    </el-form-item>
  </div>

but I can't have the values of the v-model from the child to the parent. Do you have solution ?

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda