@submit.prevent="" or just @click

Well I haven't learned about Vue yet but it looks like:

@click would do the action you've intended it to AND still submit the form.

@submit.prevent would call the method you want it to and NOT submit the form.

Please correct me if I'm wrong.

@Jaytee Yes I know what they do. But why should I use @submit.prevent instead of @click?

Typically if you are using Vue you don't want the default html form results where you do a round trip to the server. You normally want to stay on the page and present the user with the results without having their browser refresh.

@nate.a.johnson Yes I understand that. But why would someone use @submit.prevent instead of @click.

Well it makes sense, @click will run your Vue and submit the form. If you're already going to be handling the data via Vue, why submit the form too? If you're going to handle half of your data with Vue, use @click and then handle the other via php etc.

If you're also making Ajax requests then there's no point submitting the form with @click because Vue will send an Ajax request and then when the form submits, the same pho code will be ran too which makes it run twice.

By default a submit button sends a request to the server. If your using Ajax you need to prevent the form from submitting.

Now why submit.prevent? To keep proper HTML. This is useful for pages passing HTML verification and seo.

Yes technically with JavaScript and Ajax you don't need a form at all or a submit button, which obviously isn't proper HTML but works fine. Yes you can even set the click event to preventDefault() too. But why when vue gives you the suger to do it on submit?

The most important reason is that there are other ways to submit a form than clicking the button. Hitting "enter" in a text input for example.

Using just @click means you can't submit the form by pressing enter when you are done filling out the last field. You don't want to deviate from standard expected browser behavior if you don't have to.

"why should I use a form (with @submit.prevent="") in vue.js"

If you have "required" attributes on some of your fields, they won't work with @click. "required" only works in a form, on submit. Sure you can write your custom method for validation and execute it on @click, but with form it's just easier.