0
1.1K
ViewsVuejs: ¿Cómo puedo consola.log () todas las entradas de formulario?
A menudo necesito depurar las entradas de mi formulario
Odio tener que hacer este enorme y largo y, a veces, faltan vars...
console.log(this.type, this.name, this.url, this.timezone, this.startDate, this.endDate, this.startTime, this.endTime, and 10 more variables .... )¿Hay alguna manera de console.log (TODAS las entradas en un formulario)?
He intentado
getAllData(id) { let myForm = document.getElementById(id) let formData = new FormData(myForm) const data = {} // need to convert it before using not with XMLHttpRequest for (let [key, val] of formData.entries()) { Object.assign(data, { [key]: val }) } console.log(data) },y llámalo así:
this.getAllData('form')tengo esto en mi consola
No puedo entender nada de eso...
Prueba # 2
He intentado
getAllData(id) { let myForm = document.getElementById(id) console.log( Array.from(myForm.elements).map((e) => { return e.value }) ) },Obtengo un mejor resultado ahora, pero me gustaría ver la clave junto con el valor.
Esto es lo que veo ahora.. (solo el valor)
3 answers
Answer question0
¿Qué tal el alcance de los valores de su formulario en un valor de form , es decir:
data: () => ({ form: { errors: {}, values: { type: '', name: '' } } }) Luego puede simplemente hacer console.log(this.form) , o colocar <pre>{{ form }}</pre> en la plantilla para una salida JSON.
Además, si agrega values y errors dentro del valor del form , puede hacer su validación y luego contener cosas al generar, es decir
<div class="form-group"> <label for="input-type">Type</label> <input id="input-type" v-model="form.values.type" type="text" :class="['form-control', { 'is-invalid': form.errors.type }]" placeholder="Enter the type of the thing..."> <div v-if="form.errors.type" class="invalid-feedback"> {{ form.errors.type }} </div> </div>0
También puede usar Vanilla JS para eso, digamos que tiene el siguiente HTML:
<form id="myform"> <input name="input-1" type="text"/> <input name="input-2" type="text"/> <button type="submit">Hello</button> </form>y luego simple JS
var myForm = document.getElementById('myform'); myForm.addEventListener('submit', (event) => { event.preventDefault(); console.log(Array.from(myForm.elements).map((el) => { return `${el.name}: ${el.value}`; // if you have name attribute on inputs })) });Ejemplo en jsbin: https://jsbin.com/tixiduzuyi/edit?html,js,console,output
Solución basada en HTMLFormElement.elements , por lo que si tiene un elemento <form> podría tener acceso a todos sus .elements ese formulario, también puede filtrar por tipo de input , para excluir botones o casillas de verificación (si es necesario).
0
Me resulta más fácil distribuir (usando el operador ... ) las entries del formulario en una llamada a console.log() , lo que crea una matriz de pares clave-valor para las entradas:
const formData = new FormData(formElement) console.log(...formData.entries()) 👆Esto produce una sola línea en la consola de Chrome como esta:
... y puede expandir cada entrada si es necesario:
