提交时获取表单数据？

问题描述 投票：0回答：6

提交表单后，我希望获得一个输入值：

<input type="text" id="name">

我知道我可以使用表单输入绑定将值更新为变量，但如何在提交时执行此操作。我目前有：

<form v-on:submit.prevent="getFormValues">

但是如何获取 getFormValues 方法内部的值呢？

另外，附带问题是，当用户通过绑定输入数据时，在提交时执行此操作而不是更新变量有什么好处吗？

vue.js vuejs2
6个回答
63
投票

表单 

submit
操作会发出 
submit
事件，它为您提供事件目标等。

提交事件的目标是一个 HTMLFormElement，它有一个 elements 属性。请参阅此 MDN 链接，了解如何迭代或按名称或索引访问特定元素。

如果您在输入中添加 

name
属性，您可以在表单提交处理程序中访问如下字段：

<form @submit.prevent="getFormValues">
  <input type="text" name="name">
</form>

new Vue({
  el: '#app',
  data: {
    name: ''
  },
  methods: {
    getFormValues (submitEvent) {
      this.name = submitEvent.target.elements.name.value
    }
  }
}

至于为什么要这样做：HTML 表单已经提供了有用的逻辑，例如当表单无效时禁用 

submit
操作，我不喜欢在 Javascript 中重新实现。因此，如果我发现自己生成了一个在执行操作之前需要少量输入的项目列表（例如选择要添加到购物车的项目数量），我可以在每个项目中放置一个表单，使用本机表单验证，然后从提交操作传入的目标表单中获取值。

28
投票

您应该使用模型绑定，尤其是 Schlangguru 在他的回复中提到的。

但是，您还可以使用其他技术，例如普通的 Javascript 或引用。但我真的不明白为什么你想要这样做而不是模型绑定，这对我来说没有意义：

<div id="app">
  <form>
    <input type="text" ref="my_input">
    <button @click.prevent="getFormValues()">Get values</button>
  </form>
  Output: {{ output }}
</div>

如你所见，我输入 

ref="my_input"
来获取输入 DOM 元素：

new Vue({
  el: '#app',
  data: {
    output: ''
  },
  methods: {
    getFormValues () {
      this.output = this.$refs.my_input.value
    }
  }
})

我做了一个小jsFiddle，如果你想尝试一下：https://jsfiddle.net/sh70oe4n/

但再一次，我的回答远不是你可以称之为“良好实践”的东西

18
投票

您必须为您的输入定义一个模型。

<input type="text" id="name" v-model="name">

然后您可以使用以下方式访问该值 

this.name
在您的 
getFormValues
方法中。

这至少是他们在官方 TodoMVC 示例中的做法：https://v2.vuejs.org/v2/examples/todomvc.html（请参阅 HTML 中的 

v-model="newTodo"
和 JS 中的 
addTodo()
）

2
投票

其他答案建议从输入或模型值中一一组装 json POST 正文。这很好，但您还可以选择 获取表单的整个 FormData 并一键将其发送到服务器 。下面的工作示例使用 Vue 3 和 Axios、typescript、组合 API 和设置，但同样的技巧在任何地方都适用。

我喜欢这种方法，因为处理量较少。如果你老了，你可以直接在表单标签上指定端点和编码类型。

您会注意到，我们从提交事件中获取表单，因此没有 ref，也没有 document.getElementById()，这太恐怖了。

我将 console.log() 留在那里，以表明您需要展开运算符来查看 FormData 中的内容，然后再发送它。

<template>
    <form @submit.prevent="formOnSubmit">
        <input type="file" name="aGrid" />
        <input type="text" name="aMessage" />
        <input type="submit" />
    </form>
</template>

<script setup lang="ts">
import axiosClient from '../../stores/http-common';

const formOnSubmit = (event: SubmitEvent) => {
    const formData = new FormData(event.target as HTMLFormElement);
    console.log({...formData});
    axiosClient.post(`api/my-endpoint`, formData, {
        headers: {
            "Content-Type": "multipart/form-data",
        }
    })
}
</script>
1
投票

请参阅下面的示例解决方案，我结合使用了

v-model
和“submitEvent”，即
<input type="submit" value="Submit">
。使用submitEvent从内置表单验证中受益。

<!DOCTYPE html>
    <html>
        <head>
            <script src="https://unpkg.com/vue"></script>
        </head>
    <body>
      <div id="app">
        <form  @submit.prevent="getFormValues">
           <div class="form-group">
              <input type="email" class="form-control form-control-user"                                            
              v-model="exampleInputEmail"                                
              placeholder="Enter Email Address...">
           </div>
           <div class="form-group">
              <input type="password" class="form-control"
              v-model="exampleInputPassword" placeholder="Password">   </div>
              <input type="submit" value="Submit">
        </form>
      </div>
      <script>
            const vm = new Vue({
                    el: '#app',
                    methods: {
                        getFormValues (submitEvent) {
                        alert("Email: "+this.exampleInputEmail+" "+"Password: "+this.exampleInputPassword);
                        }
                    }
            }); 
        </script>
        </body>
    </html>

0
投票

我最喜欢的做法：

Vue.createApp({
  methods: {
    getFormValues (event) {
     const form  = event.target
     const formData = new FormData(form)
     console.log(JSON.stringify(Object.fromEntries(formData)))
    }
  }
}).mount('#app')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.8/vue.global.min.js"></script>
<div id="app">
<form @submit.prevent="getFormValues">
  <input type="text" name="name" />
  <input type="submit" />
</form>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.