bootstrap-vue: b-form submit.prevent doesn't work

I have this

  <b-form v-on:submit.prevent="onSubmit" class="col-sm-12 col-md-6">
     ....
     <b-button type="submit" variant="primary">Register</b-button>
  </b-form>

and the onSubmit method is not being called and it works with regular form tag

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15 (12 by maintainers)

Commits related to this issue

fix(form): Emit native submit on component Fix for issue #588 Prevent the need to use `.native` modifier markup. — committed to bootstrap-vue/bootstrap-vue by tmorehouse 7 years ago
fix(form): Emit native submit on component (#636) Fix for issue #588 Prevent the need to use `.native` modifier markup. — committed to bootstrap-vue/bootstrap-vue by tmorehouse 7 years ago

Most upvoted comments

If like me, it’s the third time you face weird behavior with your forms (for instance, using v-on:submit.native.prevent="onSubmit" still does not prevent redirection if you press enter), the only correct way to make forms is:

<b-form @submit.prevent="yourFormSubmissionMethod">
   <b-button type="submit"></b-button>
</b-form>

As far as I’ve tried, any other technique causes unwanted redirections (either by pressing the button or pressing Enter)

Overdrivr on Jan 25, 2019

I may open a PR on vue to better document this very necessary feature.

alexsasharegan on Jun 30, 2017

The issue has been moved to the website repo: https://github.com/vuejs/vuejs.org/issues/979

alexsasharegan on Jun 30, 2017

But why to add code to mimic Vue original behavior? If someone goint to write with Vue - he must be ready to read Vue docs if .native was some undocumented hack - maybe it will be worth to avoid it use… But it’s a documented feature

mosinve on Jul 4, 2017

PR #636 should address this issue and allow you to just use @click="onSumnit($evemt)" and in your onSubmit handler you can do a preventDefault() and .stopPropagation() on the event to stop the form from being submitted.

tmorehouse on Jul 4, 2017

Follow the issue at vue #6003

alexsasharegan on Jun 30, 2017

So I’m not sure if we can provide the same event binding modifiers on custom components that vue does on native elements. Ultimately, we can save code size by not attempting to manually re-emit all native events on a given vue component. I personally don’t think the v-on:event.native modifier gets a big enough mention in the docs. It’s going to become very important as component libraries become more popular in vue.

Resources

alexsasharegan on Jun 30, 2017