Trigger submit with prevent default - vue.js

Question

I'm trying to call submit method on form via refs from my script. On form tag I have #submit.prevent.
<template>
<div id="app">
<form ref="search-form" #submit.prevent="sub">
<input type="text" required />
</form>
<button #click="submitForm">click me</button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
submitForm() {
this.$refs["search-form"].submit();
},
sub() {
console.log("submitted");
},
},
};
</script>
My problems are that when I click button:
page get reloaded like prevent default is not working
sub() is not called at all
Why?

Answer 1

Your question is not clear what you want to do but maybe you need this
const app = new Vue({
methods: {
submitForm() {
this.$refs["search-form"].submit();
},
sub() {
alert('hello');
},
}
})
app.$mount("#app")
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<form ref="search-form" #submit.prevent="sub">
<input type="text" required/>
<button #click.native.prevent="submitForm">Send</button>
</form>
</div>

Answer 2

<template>
<div id="app">
<form ref="search-form">
<input type="text" required />
</form>
<button #click.stop.prevent="processForm">click me</button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
processForm() {
// validation here
this.$refs["search-form"].onsubmit = this.submitForm();
},
submitForm() {
// AJAX here
console.log("submitted");
},
},
};
</script>
⚠️ I assume that when you use prevent means you are going to manually submit the form at a later stage (maybe after client side validation). Then its either you use AJAX or Axios to submit the form to the server side. Calling submit() anywhere here will still reload your page.