代码之家 › 专栏 › 技术社区 › code-8

Vuejs:我怎样才能安慰你呢。log()所有表单输入?

vuetify.js vue-component vuejs2 vue.js javascript

code-8 · 技术社区 · 4 年前

我经常需要调试表单输入

我讨厌做这么大的事;长时间的,有时是失踪的Var。。。

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

有没有办法安慰我。记录(表格中的所有输入)?

我试过了

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

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

这就是我现在看到的。。(只有价值)

2 回复 | 直到 4 年前

Lawrence Cherone 4 年前

关于你表格中的价值观 form 价值,即:

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

然后你可以简单地做 console.log(this.form) ,或扑通一声 <pre>{{ form }}</pre> 在JSON输出的模板中。

此外,如果您添加 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>

Andrew Ymaz 4 年前

你也可以使用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 在该窗体上,您还可以通过 input 键入,以排除按钮或复选框(如果需要)。

tony19 thanksd 4 年前

我觉得最容易 spread (使用 ... (接线员)表格 entries 变成一个 console.log() 调用,它为条目创建一个键值对数组:

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

这会在Chrome的控制台中产生一行代码,如下所示:

...如果需要,您可以展开每个条目:

demo