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

Question

我想从我的 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

原文由 bbsimonbb 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

答案是： ref ： https ://v2.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()
    }
  }
});

原文由 Linus Borg 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 RaseL Mahmud 发布，翻译遵循 CC BY-SA 4.0 许可协议