<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>
Run code snippet
//HTML
<div id="vueRoot">
<form ref="form">
<input name="vitalInformation" v-model="store.vital">
<a href="#" v-on:click="submit">SUBMIT</a>
</form>
</div>
//JS
vm = new Vue({
el : "#vueRoot",
methods : {
submit : function(){
this.$refs.form.submit()
}
}
});
data: function(){
return {
name: "",
price: "",
}
},
methods: {
addProduct(e){
e.preventDefault() // it prevent from page reload
// console.log(this.name, this.price);
}
}
<div id="vueRoot">
<form ref="form">
<input name="vitalInformation" v-model="store.vital">
<a href="#" v-on:click="submit">SUBMIT</a>
</form>
</div>