New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

b-form submit.prevent doesn't work #588

Closed
yordis opened this Issue Jun 30, 2017 · 14 comments

Comments

Projects
None yet
5 participants
@yordis

yordis commented Jun 30, 2017

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

@alexsasharegan

This comment has been minimized.

Contributor

alexsasharegan commented Jun 30, 2017

Try using v-on:submit.native.prevent="onSubmit". This will tell Vue to listen for that event on the form element, not the form component.

@yordis

This comment has been minimized.

yordis commented Jun 30, 2017

@alexsasharegan it does work. Could you send me some info about that native thing? Also is there anyway to avoid this? I don't want to be paying attention to those details if possible

@yordis yordis closed this Jun 30, 2017

@alexsasharegan

This comment has been minimized.

Contributor

alexsasharegan commented 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

This comment has been minimized.

Contributor

alexsasharegan commented Jun 30, 2017

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

@alexsasharegan

This comment has been minimized.

Contributor

alexsasharegan commented Jun 30, 2017

Follow the issue at vue #6003

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jun 30, 2017

I was working on a form.vue component the other day until I realized we had one (but wasn't in the docs).

The mockup I had originally included Vue handlers for submit and additional props for setting action, method and encoding.

We could add a few tweaks to the b-form to propagate a vue component "submit" event, based on the presence (or lack there of) of action, etc.

@alexsasharegan

This comment has been minimized.

Contributor

alexsasharegan commented Jun 30, 2017

I'm worried that it may be more trouble than it's worth because the modifiers likely won't function on the inline binding syntax.

@alexsasharegan

This comment has been minimized.

Contributor

alexsasharegan commented Jun 30, 2017

P.S. Here's possibly the issue that initiated the .native modifier: vuejs/vue#2942

@alexsasharegan

This comment has been minimized.

Contributor

alexsasharegan commented Jun 30, 2017

screen shot 2017-06-30 at 6 07 09 am

@alexsasharegan

This comment has been minimized.

Contributor

alexsasharegan commented Jun 30, 2017

The issue has been moved to the website repo: vuejs/vuejs.org#979

@meyt

This comment has been minimized.

meyt commented Jul 4, 2017

in my case form submit event works if you have not form input more than one!
this sample works fine:
https://jsfiddle.net/j08b7c4o/23/

<b-form v-on:submit.prevent="alert('SUBMIT')">
    <b-form-input v-model="text" type="text"></b-form-input>
</b-form>

but this is not:
https://jsfiddle.net/j08b7c4o/22/

<b-form v-on:submit.prevent="alert('SUBMIT')">
    <b-form-input v-model="text" type="text"></b-form-input>
    <b-form-input v-model="text2" type="text"></b-form-input>
</b-form>

tmorehouse added a commit that referenced this issue Jul 4, 2017

fix(form): Emit native submit on component
Fix for issue #588

Prevent the need to use `.native` modifier markup.

tmorehouse added a commit that referenced this issue Jul 4, 2017

fix(form): Emit native submit on component (#636)
Fix for issue #588

Prevent the need to use `.native` modifier markup.
@tmorehouse

This comment has been minimized.

Member

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

@mosinve

This comment has been minimized.

Member

mosinve commented Jul 4, 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

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 4, 2017

True... but since it is a component, some people expect it to emit the events, this is just a convenience method. Users can still work with .native.

The new documentation (for v0.18.0) has a little note at the bottom of each component page that reminds users of the .native modifier, with link to the Vue docs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment