在提交时获取表单数据？

Question

当我的表单被提交时，我希望得到一个输入值：

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

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

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

但是我怎样才能得到 getFormValues 方法中的值呢？

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

原文由 panthro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您应该使用模型绑定，尤其是 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/

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

原文由 Hammerbot 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

原文由 Sean Ray 发布，翻译遵循 CC BY-SA 4.0 许可协议