0

buenas noches comunidad!

Estoy tratando de crear un motor para construir formularios con campos dinámicos a partir de un esquema en JSON, el cuál recibiré del backend mediante el consumo de un endpoint.

Actualmente tengo un componente principal, el cual le envia a un componente secundario un JSON con los controles que necesito renderizar.

Componente principal

<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: []
    }
  },
  methods: {
    send: () => {
      // Código para procesar el formulario sin conocer los controles
    }
  }
}

</script>

Componente Secundario

<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);
    },
    // Método 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)
    }
  }
}
</script>

Esquema Json que devolvería el Backend

[
    {
      "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"
        }
      ]
    }
  ]

Hasta aquí todo funciona bien, pues renderiza los controles de entrada correctamente de acuerdo al esquema JSON que obtengo. Sin embargo pensando en como manejar los eventos de cada control y recuperar sus datos de forma dinámica me surge la duda de si seguir utilizando HTML Templates o bien optar por Vue Render y controlar las cosas desde JavaScript.

Además me gustaría leer sus respuestas con ideas de cómo estructurar mis componentes y código, de tal manera que sea lo más dinámico y reciclable posible para crear nuevos formularios a partir de un json.

Saludos!

1 respuesta 1

0

Tienes dos maneras de recoger los datos del componente hijo:

  • Hacer referencia a tu componente con $refs. En tu caso sería así <FormControls :fields="fields" ref="formcontrol"></FormControls>. En tu componente padre puedes encontrar todo lo que contiene FormControls con this.$refs.formcontrol.

  • En segundo lugar, quizás te sea mas sencillo generar componentes dinamicos, es decir, creas tantos componentes como campos vayas a usar en tu form (textarea,input,select...) y luegos los randerizas de manera dinamica asi:

    <div v-for="v-for="field in fields"">
    
    <component v-bind:is="field.type">
    
    </component></div>
    

Si en este segundo caso, incluyes referencias a los componentes, podrás obtener también todo lo relativo a lo que contienen. Una manera fácil de obtener los v-model de todos esos componentes es incluir una función en cada componente hijo que retorne el valor de los v-model, y ejecutar dicha llamda en el padre a través de los $refs. Ejemplo: this.$refs.inputField.retornoValores Esto tantas veces como te componentes tenga tu llamada, por lo que lo suyo es hacer un for de $refs, ya que normalmente las referencias son un array de objetos.

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.