【问题标题】：Vuejs : How can I console.log() all form inputs?Vuejs：如何 console.log() 所有表单输入？
【发布时间】：2022-01-24 01:36:17
【问题描述】：

我经常需要调试我的表单输入

我讨厌不得不做这个又大又长而且有时会丢失 vars ...

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

有没有办法 console.log(表单中的所有输入)？

我试过了

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

然后这样称呼它：

this.getAllData('form')

我在控制台中得到了这个

我无法理解它的任何意义......

试试#2

我试过了

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

我现在得到了更好的结果，但我希望看到键和值。

这就是我现在看到的......（只有价值）

【问题讨论】：

据我所知这是不可能的，但你可以做的是在一个对象中定义你的所有输入。所以你可以像这样记录你的对象console.table(this.formData)
刚刚看到您的编辑，您不应该使用document.getElementById 并抓取表单，相反，您应该使用模型，如果您真的必须使用它然后将Object.assign(data, { [key]: val }) 换成this.$set(this.form.values, key, value) 分配给模型

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

如何在 form 值中限定表单值，即：

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

然后，您可以简单地执行console.log(this.form)，或在模板中添加<pre>{{ form }}</pre> 以获得 JSON 输出。

此外，如果您在form 值中添加values 和errors，您可以进行验证，然后在输出时包含内容，即

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

【讨论】：

【解决方案2】：

你也可以使用 vanilla JS，假设你有以下 HTML：

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

然后是普通的 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
  }))
});

jsbin 示例：https://jsbin.com/tixiduzuyi/edit?html,js,console,output

基于HTMLFormElement.elements 的解决方案，因此如果您有一个<form> 元素，您可以访问所有.elements whiting 该表单，您还可以按input 类型过滤，以排除按钮或复选框（如果需要）。

【讨论】：

为了查看密钥，您需要确保您的输入具有某种唯一的密钥标识，例如name 属性（如上面的示例）然后您可以添加（在您的控制台日志）：return {[el.name]: el.value}; 或纯字符串 return `${el.name}: ${el.value};

【解决方案3】：

我发现最简单的方法是将spread（使用... 运算符）表单的entries 调用到console.log() 调用中，这将为条目创建一个键值对数组：

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

这会在 Chrome 的控制台中生成一行，如下所示：

...如果需要，您可以展开每个条目：

demo

【讨论】：

涂料.. 谢谢托尼。