-1

Hola, buen día Comunidad.

Tengo un componente padre que incluye un componente hijo, en el cual renderizo dinámicamente un formulario con distintos controles a partir de un objeto JSON (obtenido mediante una petición Get de Axios).

Mi objetivo es leer/recorrer todos los valores de los campos del formulario que se encuentra en el componente hijo desde el componente padre. ¿Cómo lo haría con Vue JS?

Les dejo a continuación parte del código, si alguien tiene propuestas de mejoras serán bien recibidas. Por ejemplo estructurar mejor el código para que esté más organizado y limpio o utilizar mejores practicas de programación con Vue. Gracias.

Componente Padre

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

Objeto 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"
        }
      ]
    }
  ]

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>

0

1 respuesta 1

0

Se podría hacer de varias maneras...

Se me ocurre que si en el componente hijo creas un objeto donde guardar los valores de los inputs, por ejemplo values

data: function () {
  return {
    values: {},
  }
},

Y desde los inputs vas actualizando ese objeto:

<input v-model="values[field.name]" />

Cada vez que se modifica un input:

<input @input="onInput" />

Puedes emitir un evento al componente padre con el objeto donde guardas los valores de todos los inputs:

methods: {
  onInput(value) {
    this.$emit('change', this.values);
  },
},

Y en el componente padre escuchas ese evento:

<form-controls @change="onFieldsChange"></form-controls>

Y haces algo con eso:

methods: {
  onFieldsChange(value) {
    console.log(value);
  },
},

Te dejo un snippet funcional para que le des a ejecutar y lo pruebes:

Vue.component('form-controls', {
    props: ['fields'],
    data() {
        return {
            values: this.fields.reduce((acc,curr)=> (acc[curr.name]='',acc),{}),
        }
    },
    methods: {
        isInput(type) {
            return ['text', 'password', 'checkbox', 'file', 'date'].includes(type);
        },
        onInput() {
            this.$emit('change', this.values);
        },
    },
    mounted() {
        this.onInput();
    },
    template: '<div><hr><h3>Hijo</h3><ul><li v-for="(field, index) in fields" :key="index"><input v-if="isInput(field.type)" :type="field.type" v-model="values[field.name]" @input="onInput" /><br>{{field.name}}: {{values[field.name]}}</li></ul><hr></div>'
});

new Vue({
    el: '#components-demo',
    data: {
        fieldsValues: {},
        fields: [
            {
                "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"
            },
        ],
    },
    methods: {
        onFieldsChange(value) {
            this.fieldsValues = value;
        },
    },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="components-demo">
  <hr>
  <h3>Padre</h3>
  <pre>{{fieldsValues}}</pre>
  <hr>
  <form-controls :fields="fields" @change="onFieldsChange"></form-controls>
</div>

Bien, con eso tienes para empezar. Luego te toca la parte de los select y demás.

5
  • Muchas gracias por la ayuda. Mencionas que se puede hacer de varias formas, ¿hay alguna manera de hacerlo sin utilizar $emit? Commented el 30 mar. 2021 a las 23:41
  • Y otra duda, suponiendo que construyo un tercer componente en el cual mando a renderizar los inputs, es decir un componente hijo del hijo (nivel 3), ¿podría recuperar sus datos desde el padre (nivel 1)? ¿O primero tengo que devolverlos al nivel 2, y este lo pasaría al nivel 1? Commented el 30 mar. 2021 a las 23:44
  • @HugoMixerBS Sin emit: Otra forma sería poniendole un ref al componente hijo, o también puedes usar vuex si necesitas mantener el estado de un formulario complejo. Commented el 31 mar. 2021 a las 13:00
  • A la duda del hijo nivel 3: Sí, el evento se emite del hijo al padre. O sea, del componente 3 emitir el evento y escucharlo en nivel 2, del nivel 2 emitirlo y escucharlo en el nivel 1. Commented el 31 mar. 2021 a las 13:04
  • Gracias, ya lo probé con ref, sin embargo de esa forma, la lógica se me amontona en el padre tratando de controlar los datos y métodos de todos sus hijos. Yo creo voy a optar por vuex, ya que pienso que podría funcionar como una interfaz "independiente" entre el padre y los distintos hijos (los diversos componentes: tabs, multi-select, input, etc). Lo único es que nunca lo he usado y no tengo mucha idea de como llevarlo a cabo. Commented el 31 mar. 2021 a las 19:11

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.