Form submission canceled because the form is not connected

[lucadegasperi]

Hello Everyone,

I'm injecting some html that contains a form using the v-html directive.

<div v-html="event.view">
</div>

Since chrome automatically updated itself to version 56 I can no longer submit the form that's injected there. In the developer console the error I'm getting is:
Form submission canceled because the form is not connected
Reading through stack overflow what I came up with is this post that highlight a change in chrome's behavior. http://stackoverflow.com/questions/42053775/getting-error-form-submission-canceled-because-the-form-is-not-connected
The solution seems to be appending the form to the html. but shouldn't Vue already do this for me?

I'm stuck on this issue.

[posva]

Thank you for your interest in this project.

However, your issue is a usage/support question, and the issue tracker is reserved exclusively for bug reports and feature requests (as outlined in our Contributing Guide).

We encourage you to ask it on the forum , Stack Overflow or on gitter and are happy to help you out there. Come back open a new issue if you find out there's a real issue

[lucadegasperi]

Hello @posva, Thanks for replying. I decided to post this issue here because this might be a problem other come across in the future (since chrome 56 has just been released) and I think it might be a common use case to use v-html to inject a form (I do render the form server side and then let vue display it at the right place). Since I don't know the vue internals too well, I don't know if this is something you have to adapt in the vuejs internals or not.

Maybe my post should read [BUG] Form injected via v-html does not get submitted in chrome 56

[posva]

In that case, can you follow the Issue Reporting Guidelines and provide a minimal JSFiddle or Github repository containing a set of reproducible steps that can lead to the behaviour you described, please?

[lucadegasperi]

@posva I have updated my vuejs version and the issue seems to be resolved now. Will reopen the issue if there are any new problems.

Thanks!

[uniconstructor]

Just set button type as "button" like this:
<button type="button">my button</button>

[LeonyLino]

in the case of button with type = "submit"?

[sgangadhar02]

@LeonnyLino

Use Axios if you're looking for ajax based solution.

<template>
    <form @submit.prevent="submit">
        <input type="text" v-model="name"> 
         <button type="submit">
            Submit
        </button>
    </form>
</template>