Vue.js 在提交时获取表单数据？

提交表格时，我希望获得一个输入值：

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

我知道我可以使用表单输入绑定来更新变量的值，但是我怎么能在提交时这样做呢。我目前有：

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

但是如何在getFormValues方法中获取值呢

---

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

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

然后可以使用访问值

this.name

在

getFormValues

方法中

---

至少在官方的TodoMVC示例中是这样做的：（请参见HTML中的

v-model=“newTodo”

和JS中的

addTodo（）

）

您应该使用模型绑定，特别是在这里，正如Schlangguru在其回答中提到的那样

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

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

如果您想尝试，我制作了一个小JSFIDLE：

---

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

表单

submit

操作会发出一个消息，它会为你提供事件目标，以及其他信息

提交事件的目标是HTMLFormElement，它具有elements属性。有关如何通过名称或索引迭代或访问特定元素的信息，请参见

如果在输入中添加

名称

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

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

新Vue({
el:“#应用程序”，
数据：{
名称：“”
},
方法：{
getFormValues（submitEvent）{
this.name=submitEvent.target.elements.name.value
}
}
}

---

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

submit

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

感谢您对良好做法的建议，看起来我应该遵循模型绑定技术。这对我来说很有效，但您似乎无法硬编码两个复选框？我认为这种方法是可行的当您使用ajax收集值并将其发送到远程点时，o也是有意义的。为什么要包含另一个v模型？似乎也没有必要，是否仍然可以从多字段表单中获取所有输入值，而无需通过-submitEvent.target.elements.name.value、submitEvent.target.elements.age.value、submitEvent.target.elements.gender.valueetc.etc.是否有任何速记来获取表单提交的所有值？@∧BHIN∧V使用，您可以使用循环来迭代所有表单元素：

for（让submitEvent.target.elements的元素）{//do something with element.value}

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