在提交时获取表单数据?

问题描述

提交表单时，我希望获得输入值:

我知道我可以使用表单输入绑定来更新变量的值，但是我怎么能在提交时做到这一点.我目前有:

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

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

解决方案

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

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

<表格><input type="text" ref="my_input"><button @click.prevent="getFormValues()">获取值</button></表单>输出:{{输出}}

如您所见，我将 ref="my_input" 放入获取输入 DOM 元素:

new Vue({el: '#app',数据: {输出: ''},方法: {getFormValues(){this.output = this.$refs.my_input.value}}})

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

但再一次，我的回答远非你可以称之为良好做法"的东西

When my form is submitted I wish to get an input value:

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

I know I can use form input bindings to update the values to a variable, but how can I just do this on submit. I currently have:

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

But how can I get the value inside of the getFormValues method?

Also, side question, is there any benefit to doing it on submit rather than updating variable when user enters the data via binding?

解决方案

You should use model binding, especially here as mentioned by Schlangguru in his response.

However, there are other techniques that you can use, like normal Javascript or references. But I really don't see why you would want to do that instead of model binding, it makes no sense to me:

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

As you see, I put ref="my_input" to get the input DOM element:

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

I made a small jsFiddle if you want to try it out: https://jsfiddle.net/sh70oe4n/

But once again, my response is far from something you could call "good practice"

这篇关于在提交时获取表单数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！