包含 Vue 后 Laravel 表单损坏

Question

我正在向 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>

post 操作仍在执行，但我收到 419“页面已过期”错误，因此我假设 csrf 值不再与 post 数据一起发送。

有谁知道为什么会发生这种情况？目前，我已将 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>

Answer 1

您的花括号与 Vue.js 冲突。 Laravel 的文档中有一个Blade & JavaScript Frameworks 部分，上面写着：

由于许多 JavaScript 框架也使用“大括号”来指示应在浏览器中显示给定表达式，因此您可以使用 @ 符号来通知 Blade 渲染引擎某个表达式应保持不变。例如：

<h1>Laravel</h1>

Hello, @{{ name }}.

在本例中，@ 符号将被 Blade 删除；但是，{{ name }} 表达式将保持不受 Blade 引擎影响，而是由您的 JavaScript 框架呈现。