Question

我想通过方法从我的Vue页面提交经典表单。我不想使用输入类型=提交。如何从我的方法中引用页面中的表单元素？当然我不必做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

Answer 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.submit()
    }
  }
});

Answer 2

另一个选择是触发事件Traceback (most recent call last): cv2.imgshow("Capturing",frame) AttributeError: module 'cv2.cv2' has no attribute 'imgshow' >>>。

click()

在您的函数中调用它，如下所示：

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

Answer 3

对不起，您回答迟了。但是我很困惑为什么您在提交表单时需要参考

  

 

  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>

Answer 4

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

Answer 5

从以上答案中，我使用了以下语句

TypeError: Cannot read property '$refs' of null

都抛出跟随错误

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

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

如果要使用ref进行表单提交事件

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

如果您想对其他元素的事件（例如click）使用ref

{{1}}

提交表格。如何引用表单元素？

5 个答案:

标记

码