获取表单数据提交？

Question

提交表单后,我希望得到一个输入值:

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

我知道我可以使用表单输入绑定来将值更新为变量,但我怎样才能在提交时执行此操作.我目前有:

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

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

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

Answer 1

表单submit操作会发出一个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中重新实现.所以,如果我发现自己在执行操作之前生成了需要少量输入的项目列表(比如选择要添加到购物车中的项目数量),我可以在每个项目中放置一个表单,使用本机表单验证,然后从提交操作中获取目标表单的值.

Answer 2

您应该使用模型绑定,特别是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/

但是再一次,我的回答远远不是你称之为"良好做法"的东西.

Answer 3

您必须为输入定义模型。
<input type="text" id="name" v-model="name">

然后，您可以this.name在您的getFormValues方法内部使用该值 。

至少这是他们在官方TodoMVC示例中所做的事情：https ://vuejs.org/v2/examples/todomvc.html （请参见v-model="newTodo"HTML和addTodo()JS）