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

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

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

data: function(){
  return {
   name: "",
   price: "",
  }
},
methods: {
  addProduct(e){
    e.preventDefault() // Prevent page from reloading.
    // 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 3

另一种选择是触发事件click()。

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

在你的函数中调用它如下：

this.$refs.submit.click();