0

Tengo un Componente Hijo que renderiza dinámicamente controles de formulario a partir de un esquema JSON proporcionado por un Componente Padre.

Quiero recuperar los datos del formulario al dar clic en un botón desde el componente padre (los cuales desconoce porque el componente hijo los crea dinámicamente) ¿Cómo podría realizar eso de la mejor manera? ¿Es necesario que utilice $emit en el componente hijo? ¿Si agrego un componente intermedio, es posible saltarselo o tengo que enviar de un componente a otro respetando su jerarquia?

<template>
  <div id="app">
    <h1>{{msg}}</h1>
    <b-container>
      <b-card>
        <b-card-title>Formulario Dinámico</b-card-title>
        <b-card-body>
           <FormControls :fields="fields"></FormControls>
        </b-card-body>
        <b-card-footer>
          <button class="btn btn-primary" @click="send">Enviar</button>
        </b-card-footer>
      </b-card>
    </b-container>
  </div>
</template>

<script>
import FormControls from "./FormControls.vue";
import ComponentTest from "./ComponentTest.vue";
import axios from 'axios';

export default {
  name: 'app',
  components: {
    FormControls,
    ComponentTest
  },
  created() { 
    axios.get('./src/form.json').then(response => this.fields = response.data); 
  },
  data () {
    return {
      msg: 'Bienvenido',
      fields: [] // Array que almacenará el json proveniente de la petición get
    }
  },
  methods: {
    send: () => {
      alert('Enviar Formulario');
    }
  }
}

</script>

Componente hijo

<template>
  <div>
  <form>
    <ul>
      <li v-for="field in fields" :key="field">
        <label :for="field.name">{{field.label}}</label>

        <input v-if="isInput(field.type)" 
        :id="field.name" :type="field.type" :placeholder="field.placeholder" >

        <select v-else-if="field.type === 'select'" :name="field.name">
          <option v-for="opt in field.options" :key="opt" :value="opt.name">
          {{opt.label}}
          </option>
        </select>

        <textarea v-else-if="field.type === 'textarea'" :id="field.name" />
        
        <div v-else-if="field.type === 'multiselect'" class="multi-select">
          <multiselect v-model="values" tag-placeholder="Agregar etiqueta" :placeholder="field.placeholder" label="label" track-by="name" :options="field.options" :multiple="true" :taggable="true" @tag="agregarEtiqueta"></multiselect>
        </div>

      </li>
    </ul>
  </form>
  </div>
</template>

<script>
export default {
  props: ['fields'],
  name: 'FormControls',
  data () {
    return {
      titulo: 'Formulario Dinámico',
      // Aqui va lo del MultiSelect
      values: [],
      options: []
    }
  },
  methods: {
    isInput(type) {
      return ['text', 'password', 'checkbox', 'file', 'date'].includes(type);
    },
    // metodo multiselect
    agregarEtiqueta (newTag) {
      const tag = {
        name: newTag,
        label: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
      }
      this.options.push(tag)
      this.value.push(tag)
    },
    devolverControl(){

    }
  }
}
</script>

Esquema JSON

[
    {
      "name": "fechaRegistro",
      "label": "Fecha de Registro",
      "type": "date",
      "placeholder": "Ingresa Fecha"
    },
    {
      "name": "nombreDeUsuario",
      "label": "Nombre de Usuario",
      "type": "text",
      "placeholder": "Ingresa Usuario"
    },
    {
      "name": "passwordUsuario",
      "label": "Password",
      "type": "password",
      "placeholder": "Contraseña"
    },
    {
      "name": "adjuntarArchivo",
      "label": "Adjuntar",
      "type": "file"
    },
    {
      "name": "roles",
      "label": "Roles",
      "type": "select",
      "sortedByKey": false,
      "options": [{
          "name": "admin",
          "label": "Administrador"
        },
        {
          "name": "user",
          "label": "Usuario"
        },
        {
          "name": "guest",
          "label": "Invitado"
        }
      ]
    },
    {
      "name": "description",
      "label": "Descripción",
      "type": "textarea"
    },
    {
      "name": "multiSelect",
      "label": "Selección Multiple",
      "type": "multiselect",
      "options": [{
          "name": "op1",
          "label": "Opcion1"
        },
        {
          "name": "op2",
          "label": "Opcion2"
        },
        {
          "name": "op3",
          "label": "Opcion3"
        }
      ]
    }
  ]

1

1 respuesta 1

0
  1. Puedes utilizar Vuex
  2. Puedes cambiar una variable del hijo desde el padre para que el hijo esté observando esa variable (watch) y se ejecuté la acción de recuperar la información
  3. Puedes utilizar refs para poder ejecutar un método del hijo directamente desde el padre

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.