javascript - 表单提交取消,因为表单没有连接 Vue js 和 Laravel
问题描述
我在内联模板中创建了一个表单,我在其中有条件地呈现表单,例如
<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 的新手。任何指导都会有所帮助。
解决方案
出现此警告是因为您的表单不再附加到文档中。表单正在分离,因为在实际提交表单之前编辑更改为 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>
还添加了传递表单的选择器,因此您可以拥有更多表单而不会破坏它。
推荐阅读
- azure - 在 Azure 应用程序网关中设置 SSL
- ios - 如何检测 UITextField 何时更改并触发警报?
- c# - C# SQL Server:如果文本框值> 0 或!null,如何插入表?, 使用 SqlCommand 参数作为值
- reactjs - React-Native 为一个项目设置动画并同时休息
- javascript - 查找具有相同类但排除单击的元素的所有元素?
- android - 工具栏不显示个人资料图标
- java - 尝试在聊天事件(Minecraft、Spigot)上设置玩家显示名称时出错
- numpy - numpy:用多维索引索引一维数组
- regex - 字符串分隔符的正则表达式
- azure-devops - Reusing PowerShell Scripts in Azure DevOps