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')
  }
},

You have 2 buttons with type submit, at least you should set different name and value for each. See also here: https://stackoverflow.com/questions/547821/two-submit-buttons-in-one-form — Vasile Radeanu, Jan 27 '21 at 15:13
@Radeanu I added the one called "add" to test. When I remove it still does not work. — MarkK, Jan 27 '21 at 15:19

score 1 · Accepted Answer · answered Jan 27 '21 at 15:20

1

Try this :

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

answered Jan 27 '21 at 15:20

Atika

1,025
2
6
17

Button does not invoke my method in vuejs when clicked

1 Answers1