表单提交取消，因为表单没有连接 Vue js 和 Laravel答案

【问题标题】：Form submission canceled because the form is not connected Vue js with Laravel表单提交取消，因为表单没有连接 Vue js 和 Laravel
【发布时间】：2020-05-03 14:34:32
【问题描述】：

我在一个内联模板中创建了一个表单，我在其中有条件地呈现表单，例如

           <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)

但是当我按下表单标签内的更新按钮时，我收到一条警告“表单提交已取消，因为表单未连接”。我是 vue.js 的新手。任何指导都会有所帮助。

【问题讨论】：

这里只是对语法的评论：你应该尝试使用v-if="editing"和v-else，而不是v-if="editing === true"和v-if="editing === false"。稍微清理一下代码，让条件渲染更整洁。

标签： javascript vue.js

【解决方案1】：

出现此警告是因为您的表单不再附加到文档中。由于在实际提交表单之前编辑更改为 false，因此表单正在分离。

要解决此问题，您必须在将编辑变量更改为 false 之前检查提交是否发生。

一种方法是调用提交表单的函数，然后更改变量：

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

然后调用它：

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

还添加了传递表单的选择器，因此您可以拥有更多表单而不会破坏它。

【讨论】：