Vuejs：如何 console.log() 所有表单输入？

Question

I oftenly need to debug my form inputs

I hate having to do this huge & long and sometimes missing vars...

console.log(this.type, this.name, this.url, this.timezone, this.startDate, this.endDate, this.startTime, this.endTime, and 10 more variables .... )

Is there a way to console.log(ALL inputs in a form)?

I've tried

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)
    },

and call it like so:

this.getAllData('form')

I got this in my console

I can't make sense from any of it...

---

Try # 2

I've tried

getAllData(id) {
    let myForm = document.getElementById(id)
    console.log(
        Array.from(myForm.elements).map((e) => {
            return e.value
        })
    )
},

I get better result now, but I would like to see the key along with the value.

This is what I see now.. (only the value)

Answer 1

How about scoping your form values in a form value, ie:

data: () => ({
  form: {
    errors: {},
    values: {
      type: '', 
      name: ''
    }
  }
})

You can then simply do console.log(this.form) , or plop <pre>{{ form }}</pre> in the template for a JSON output.

Additionally, if you add values and errors within the form value you can do your validation then contain things when outputting, ie

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

Answer 2

You can also use vanilla JS for that, let's say you have the following HTML:

  <form id="myform">
    <input name="input-1" type="text"/>
    <input name="input-2" type="text"/>
    <button type="submit">Hello</button>
  </form>

and then plain 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
  }))
});

Example on jsbin: https://jsbin.com/tixiduzuyi/edit?html,js,console,output

Solution based on HTMLFormElement.elements , so if you have a <form> element you could have access to all your .elements whiting that form, you can also filter by input type, in order to exclude buttons or checkboxes (if needed).

Answer 3

I find it easiest to spread (using the ... operator) the form's entries into a console.log() call, which creates an array of key-value pairs for the entries:

const formData = new FormData(formElement)
console.log(...formData.entries())
             👆

This yields a single line in Chrome's console like this:

...and you can expand each entry if needed:

demo