Tengo un formulario dinámico, renderizo mis componentes (componente de entrada, componentes de área de texto...) depende de lo que tengo en la tabla de mi base de datos, me gustaría saber cómo puedo enviar el formulario ya que no sé los nombres de mis v-models porque cada usuario en mi aplicación puede hacer un formulario diferente.
<template> <b-modal id="modal-1" v-model="showModal" title="Add Contact" modal-class="right" content-class="rounded-0" @ok="handleOk" @hidden="resetModal"> <form ref="form" name="addcontact"> <render :definition="response"></render> </form> </b-modal> </template> <script> import render from "../../components/forms/dynamic-render"; export default { components:{ render }, data() { return { showModal: true, response: [ {type:'text', label: 'My title', is_required:1}, {type:'textarea', label: 'text zone'} ] } }, methods:{ resetModal: function(){ this.$emit('close'); }, handleSubmit: function($e){ // i want to submit using axios but I don't know how in this case ( dynamic form with different v-model value ) }, handleOk: function(bvModalEvt){ this.handleSubmit(); } } }; </script>No sé los nombres de mis v-models porque cada usuario de mi aplicación puede crear un formulario diferente.
No necesitas saber el nombre. Además, solo necesita los datos que el usuario proporciona.
La solución que le proporcioné es obtener los datos del componente de render :
Primero, debe vincular toda la entrada del formulario, el área de texto y los elementos seleccionados a un objeto Json
Como
<template> <p>Assume a complex dynamic layout</p> </template> <script> export default { name: 'render', data () { return { /* bind all the input, textarea, and select elements to the Item object */ Item: { foo: 'foo', bar: 'bar' } } }, methods: { EnvelopeItem: function () { return JSON.stringify(this.Item) } } } </script> Segundo, defina un método para tener acceso al elemento desde el componente principal ( EnvelopeItem )
Tercero, asigne una referencia ( ref ) al componente de render
<render ref="render" :definition="response"></render> Cuarto, llame a EnvelopeItem desde el componente principal a través de la referencia de render
handleSubmit: function ($e) { let json = this.$refs.render.EnvelopeItem() console.log(json) // i want to submit using axios but I don't know how in this case ( dynamic form with different v-model value ) }Todo listo.