[Vuejs]-Trigger submit with prevent default

by

0👍

✅

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>

0👍

<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.

Leave a comment