vue.js - Button does not invoke my method in vuejs when clicked

Question

Method submitReg() should trigger when the button p-button is clicked, but it doesn't. I have two submit buttons at the bottom of my form. The one called "add" which works, but the Request Access does not invoke the submitReg() method, why?

          <form v-on:submit="submitReg">
          <fg-input v-model="form.email" addon-left-icon="nc-icon nc-email-85" placeholder="Email..."></fg-input>
          <fg-input v-model="form.password" type="password" addon-left-icon="nc-icon nc-key-25" placeholder="Password..."></fg-input>
          <p-checkbox class="text-left" v-model="form.acceptTerms">
            I agree to the
            <a href="#something">terms and conditions</a>.
          </p-checkbox>

          <p-button slot="footer" type="submit" round>Request Access</p-button>
          <button slot="footer"  type="submit">Add</button>

methods

methods: {
submitReg(e) {
    console.log(this.form.email);
    alert("here")
  },
  toggleNavbar() {
    document.body.classList.toggle('nav-open')
  },
  closeMenu() {
    document.body.classList.remove('nav-open')
    document.body.classList.remove('off-canvas-sidebar')
  }
},

question from:https://stackoverflow.com/questions/65921403/button-does-not-invoke-my-method-in-vuejs-when-clicked

Answer 1

Try this :

1. change <form v-on:submit="submitReg"> by <form @submit.prevent="submitReg">
2. change submitReg(e){ console.log(this.form.email); alert("here") }, by submitReg(){ alert("here") },