Question

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

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

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

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

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

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

Answer 1

表单submit操作会发出submit event，除此之外还会为您提供事件目标。

提交事件的目标是HTMLFormElement，它具有elements属性。有关如何迭代或按名称或索引访问特定元素，请参阅this MDN link。

如果您在输入中添加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/

但是再一次，我的回答远不是你可以称之为的事情＆＃34;良好实践＆＃34;

Answer 3

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

然后你可以用它来访问这个值 this.name方法中的getFormValues。

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

获取表单数据提交？

3 个答案: