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

Question

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

<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的新手。任何指导都会有所帮助。

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

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