0

Hola a todos antes que nada, gracias por sus respuestas y opiniones,me encuentro el siguiente problema quiero generar formularios dinámicamente, tengo una vista que recibe un objeto, este objeto es variante es decir, puede tener diferentes valores he logrado mostrar los formularios dinamicamente, pero no puedo hacerlo reactivo cuando el usuario ingresa datos. Comparto parte del código parte del código de la vista.

<template>
 <q-card-section v-for="(column, key, index) in tableColumns" :key="index" >
    <div class="row q-col-gutter-sm">
        <div class="col-xs-12 col-sm-12 col-md-12">
          <q-input square outlined :label="key" :value="column" />
        </div>
    </div>
</q-card-section>
</template>

En la etiqueta de script tengo el código de esta menera:

<script>
export default {
  name: 'CreateField',
  data() {
    return {
      tableName: '',
      tableColumns: {
        nombre: '',
        apellidos: '',
        edad: null
      }
    };
  },
};
</script>

Estoy buscando que al ingresar un dato en los inputs que son recorridos en un v-for este se refleje en tableColums osea que el objeto sea reactivo, cualquier ayuda u orientación es bien recibida, muchas gracias.

1 respuesta 1

0

Puedes plantear algo como, definiendo el v-model tableColumns como un array de objetos.


<template>
 <q-card-section v-for="(column, key, index) in items" :key="index" >
    <div class="row q-col-gutter-sm">
        <div class="col-xs-12 col-sm-12 col-md-12">
          <q-input v-model = "tableColumns[index].nombre" square outlined :label="key" :value="column" />
          <q-input v-model = "tableColumns[index].apellidos" square outlined :label="key" :value="column" />
          <q-input v-model = "tableColumns[index].edad" square outlined :label="key" :value="column" />
        </div>
    </div>
</q-card-section>
</template>

Aunque también si generas los cards y quieres ir guardando los datos en tableColumns, podrías a partir del formulario con los tres v-model generar un array de objetos en tableColumns.


<input v-model="nombre">
<input v-model="apellidos">
<input v-model="edad">
<button v-on:click="addData"> Guardar </button>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            nombre: '',
            apellidos: '',
            edad: '',
            tableColumns: []
        },
        methods: {
            addData: function() {
                let obj = {};
                obj.nombre = this.nombre;
                obj.apellidos = this.apellidos;
                obj.edad = this.edad;
                this.tableColumns.push(obj);
            }
        }
    })
</script>

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.