Netlify Forms with Vue @submit.prevent="handleSubmit"

Support
,
24

Respectfully, I don’t think you are right - or I’m doing a poor job of explaining myself. :wink: I was able to get one form working with Vue just fine. Everything started working when I removed @submit.prevent from the form tag. I noticed in View Source that with that portion gone, Netlify would fine the form, add the hidden form field, and things worked perfectly fine.

If you look at NetlifyTestingZone/form3.html at master · cfjedimaster/NetlifyTestingZone · GitHub, you can see I have one form and use Vue to process it with Netlify getting the form submission fine.

If I had to guess, your code looks for netlify or data-netlify in <form> tags, and the @submit part breaks it.

Does that make sense? To be clear, I think your solution would work. But if it’s really just a regex issue perhaps, that could be fixed maybe, right?

27

Hi there,

we haven’t forgotten about this - we’ll get back to you soon as soon with more info.

30

Thanks for your patience! We finally took that exact question to our developers and they said “ah, yes, we’ll fail to process, if any attribute in the form definition starts with @ or other special characters”.

I don’t think we’ll be changing that behavior, so hopefully you can work around it.

31

I was able to - but this is really something that should be documented. I don’t know React, but I’d imagine this would impact multiple front end technologies that use templating. It would be a quick one line addition to the docs I’d be happy to write. You can copy and paste. Etc etc. :slight_smile: Please do so!

32

Thanks for the suggestion!

We’ll work on getting it into the docs, and we also got a feature request filed to allow this config, which we’ll follow up here about in case we implement it.

35

I just had a similar issue but with using Alpine.js directives rather than Vue ones:

x-bind:hidden="submitted"
x-on:submit.prevent="submitForm($refs)"

I’m not sure which line caused the issue, but removing the two attributes/directives above caused my form to be discovered, whereas previously it hadn’t been.

The comment:

if any attribute in the form definition starts with @ or other special characters

From @fool earlier suggests the form will fail to be discovered if an attribute starts with a special character (guessing this means one that isn’t in the A-Z range?), but is it maybe the case that the form will also fail to be discovered if the attribute contains a special character?

Edit: as a workaround I removed those Alpine attributes, did a deployment, then checked my form had been discovered. I then added the Alpine attributes back, and did a deployment. The form remained listed in the Netlify UI, and submissions were recorded correctly. This seems like an okay workaround, as long as I don’t ever need to make a new Netlify project and move the codebase to it (if I did this I’d have to remember to remove the attributes, deploy, and then add them back and deploy again).

36

thanks for posting your workaround!