i have created a form inside an inline-template in which i am conditionally rendering the form such as

           <form v-if="editing === true" >      
                <button type="submit" @click="editing = false">Update</button>    
            </form>

            <div v-if="editing === false">
                <div >{{ $answer->body}}</div>
                <div class="row mt-3">
                    <div class="col-4">
                        @can('update', $answer)

But when i press the update button inside the form tag, i get a warning "Form submission canceled because the form is not connected". I'm new to vue.js. Any guidance would be helpful.

i have created a form inside an inline-template in which i am conditionally rendering the form such as

           <form v-if="editing === true" >      
                <button type="submit" @click="editing = false">Update</button>    
            </form>

            <div v-if="editing === false">
                <div >{{ $answer->body}}</div>
                <div class="row mt-3">
                    <div class="col-4">
                        @can('update', $answer)

But when i press the update button inside the form tag, i get a warning "Form submission canceled because the form is not connected". I'm new to vue.js. Any guidance would be helpful.

• javascript
• vue.js

• 1 Just a ment on syntax here: Instead of v-if="editing === true" and v-if="editing === false", you should try to use v-if="editing" and v-else. Cleans up the code a bit, and makes conditional rendering tidier. – Sebastian Commented May 3, 2020 at 14:58

1 Answer 1

This warning happens because your form is not attached to the document anymore. The form is getting detached because the editing changes to false before the form is actually submitted.

To fix the issue you will have to check if the submission happened before changing the editing variable to false.

One approach would be calling a function that submits the form and then changing the variable:

submitForm: (formElement) => {
  let form = this.$el.querySelector(formElement)
  form.submit()
  this.editing = false
}

And call it with:

<form id="form-1" v-if="editing === true" >      
   <button @click="submitForm('#form-1')">Update</button>    
</form>

Also added passing a selector of the form, so you can have more forms without it breaking.