在 vue 中提交表单。如何引用表单元素？答案

【问题标题】：Submit a form in vue. How do I reference the form element?在 vue 中提交表单。如何引用表单元素？
【发布时间】：2018-02-10 07:22:39
【问题描述】：

我想从我的 Vue 页面，从一个方法提交一个经典的表单。我不想使用<input type="submit">。如何从我的方法中引用页面中的表单元素？当然我不需要document.getElementById()？

标记

    <div id="vueRoot">
      <form>
        <input name="vitalInformation" v-model="store.vital">
        <a href="#" v-on:click="submit">SUBMIT</a>
      </form>
    </div>

代码

    var store = {vital:''};
    vm = new Vue({
      el : "#vueRoot",
      data : {store : store},
      methods : {
        submit : function(){
          //I'm ready, how do I do it ??
        }
      }
    });

jsfiddle

【问题讨论】：

我很好奇，你为什么不想使用 input type=submit？
或@submit="method()"

标签： vue.js

【解决方案1】：

答案是：ref:https://vuejs.org/v2/api/#ref

标记

<div id="vueRoot">
  <form ref="form">
    <input name="vitalInformation" v-model="store.vital">
    <a href="#" v-on:click="submit">SUBMIT</a>
  </form>
</div>

代码

var store = {vital:''};
vm = new Vue({
  el : "#vueRoot",
  data : {store : store},
  methods : {
    submit : function(){
      this.$refs.form.$el.submit()
    }
  }
});

【讨论】：

它说this.$refs.form.submit() 不是函数
不是这样的。上述方法只是简单地提交表单，就像您在静态 HTML 站点上单击表单的提交按钮时一样，这意味着它将发送一个包含所有字段内容的 POST 请求。
@AhmedNawazKhan，正确的方法是this.$refs.form.$el.submit()。 vm.$el 将允许您访问实际的 dom 元素
@AhmedNawazKhan 和其他人得到is not a function 或is undefined，记得也要在表单元素中添加ref="form"。
@LinusBorg 你应该把它改成form.requestSubmit()，这样任何表单验证和vue事件处理程序也可以触发。（抄送@AndresFelipe's）

【解决方案2】：

另一个选项是触发事件click()。

<button ref="submit" style="display:none;">Submit</button>

在你的函数中调用如下：

this.$refs.submit.click();

【讨论】：

【解决方案3】：

抱歉，您回复晚了。但我很困惑为什么在提交表单时需要 ref，

  

 

  data: function(){
     return {
       name: "",
       price: "",
   }
},
 methods: {
    addProduct(e){
      e.preventDefault() // it prevent from page reload
      // console.log(this.name, this.price);
    }
  }

<form v-on:submit="addProduct">
        <input type="text" v-model="name" placeholder="Product Name" >
        <input type="number"  v-model="price"         placeholder="Price" >
        <button type="submit">Add</button>
      </form>

【讨论】：

【解决方案4】：

如果它说submit is not a function 看起来如果表单控件具有提交的名称或 ID，它将掩盖表单的提交方法。在我的情况下，我的提交按钮上有name="submit"，我删除了它，它工作正常。

【讨论】：

【解决方案5】：

根据上述答案，我使用了以下陈述

this.$refs.form.submit()
this.$refs.submit.click();

都抛出以下错误

TypeError: Cannot read property '$refs' of null

我可以通过将 $refs 存储在变量中然后访问相关方法来解决此问题

如果你想在表单提交事件中使用 ref

 const form = this.$refs.formRef
 form.submit()

如果您想将 ref 用于其他元素的事件，例如 click

 const btn = this.$refs.btnRef
 btn.click()

【讨论】：

这很奇怪。 this 永远不应为空。我从来不需要将事物分配给要访问的变量。