javascript - 包含 Vue 后 Laravel 表单损坏
问题描述
我正在向 Laravel 6.x 站点添加实时消息传递功能。消息传递似乎正在工作,但是一旦我<div id="app">
在主菜单之后添加,一些现有的表单就会停止工作。例如,这种形式:
<div class="modal-body">
<div class="form-controls">
<div class="row">
<div class="col-lg-4">
<form id="form-status{{$task->id}}" action="{{ url('xxx') }}" method="POST" style="display: none;">
@csrf
<label for="status{{$task->id}}">Status: </label>
<select class="form-control" id="status{{$task->id}}" name="status">
<option value="0" selected="selected">Not started</option>
<option value="10">Started</option>
<option value="20">Finished</option>
</select>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" onclick="event.preventDefault();document.getElementById('{{'form-status'.$task->id}}').submit();"> Update
</a>
</div>
发布操作仍在执行,但我收到 419“页面已过期”错误,因此我假设 csrf 值不再与发布数据一起发送。
有谁知道为什么会发生这种情况?目前,我已将 APP id 移动到网站的一小部分,没有预先存在的表单,但将来我希望页面上有更多的 Vue 组件,所以我必须在某个阶段修复它。
我正在使用 Bootstrap 3,所以我使用 npm 在 Laravel 中删除了 Bootstrap 4,并使用脚本标签将其导入。HTML 标头包括:
<link href="http://myurl/css/bootstrap.min.css" rel="stylesheet">
<link href="http://myurl/css/reset.css" rel="stylesheet">
<link href="http://myurl/css/dashboard.css" rel="stylesheet">
<link href="http://myurl/css/sticky-footer-navbar.css" rel="stylesheet">
<link href="http://myurl/css/bootstrap-datepicker.css" rel="stylesheet">
<!-- Script imported for laravel echo and vue -->
<script src="http://myurl/js/app.js" defer></script>
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" defer></script>
<script src="http://myurl/js/bootstrap.min.js" defer></script>
<script src="http://myurl/js/bootstrap-datepicker.js" defer></script>
谢谢,亨德里克。
编辑:发送给客户端的 html 如下:
<div class="modal-body">
<div class="form-controls">
<div class="row">
<div class="col-lg-4">
<form id="form-status94" action="myurl/projects/35/nodes/68/tasks/94/status" method="POST" style="display: none;">
<input type="hidden" name="_token" value="7ynFCghH2yNGpaO5Pfpd45EMYGIQHdXdNjYooNtJ">
<label for="status94">Status: </label>
<select class="form-control" id="status94" name="status">
<option value="0" selected="selected">Not started</option>
<option value="10">Started</option>
<option value="20">Finished</option>
</select>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" onclick="event.preventDefault();document.getElementById('form-status94').submit();">Update
</a>
</div>
解决方案
您的花括号与 Vue.js 冲突。Laravel 的文档中有一个Blade & JavaScript Frameworks部分,说:
由于许多 JavaScript 框架还使用“大括号”来指示应在浏览器中显示给定表达式,因此您可以使用该
@
符号来通知 Blade 渲染引擎一个表达式应该保持不变。例如:<h1>Laravel</h1> Hello, @{{ name }}.
在本例中,该
@
符号将被 Blade 删除;但是,{{ name }}
Blade 引擎不会改变表达式,而是允许它由您的 JavaScript 框架呈现。
推荐阅读
- win32gui - 无法检索传递给 unicode 窗口的 wchar 文本
- ansible - 如何在比较并获得 Ansible Playbook 中的差异后删除配置
- javascript - Webpack processAssets 钩子和资源源
- java - 从对象打印数组的值
- node.js - 伙计们,我如何使用谷歌地理编码API来计算欧几里得距离?
- c# - 优化正则表达式并迭代正则表达式匹配组
- javascript - 将方法值传递给另一个组件
- json - 以 JSON 形式返回验证错误消息
- python-turtle - Python:“Turtle object has no attribute Turtle”错误似乎没有充分的理由
- javascript - ngx-image-cropper imageloaded() 没有将任何图像数据传递给打字稿文件事件方法