Laravel 6-Vue错误编译模板，意外令牌“>”
我在Laravel中制作了一个迷你CMS，可以在其中创建，编辑和删除自己的布局文件。为此，我制作了带有刀片扩展名的文件，将数据放入其中并将其保存在我的layouts/layouts目录中，以便可以使用它们。我还将它们存储在数据库中，并且每当更改布局时，文件也会被更新。一切正常，但是我想在控制台中使用VUE，它说Cannot find element '#app'.我知道如何通过将<script src="{{ asset('js/app.js') }}"></script>行从文件顶部移至底部来解决此问题。对于我所有的视图，它都可以正常工作，除了可以编辑布局的视图。
我个人认为问题在于更新数据后将数据放回文件中的方式。这是更新文件的代码
public function update(Request $request, $id)
{
$layout = Layout::find($request->id);
$file = resource_path('views/layouts/layouts/' . $layout->filename);
file_put_contents($file, $request->content, FILE_IGNORE_NEW_LINES);
$newName = resource_path('views/layouts/layouts/' . Str::camel($request->name) . ".blade.php");
rename($file, $newName);
$layout->name = $request->name;
$layout->filename = Str::camel($request->name) . ".blade.php";
$layout->content = $request->content;
$layout->save();
return redirect('/dashboard/layouts');
}
这些是路线（即使将脚本移至底部，但编辑布局路线除外，该路线也可以正常工作
Route::get('/dashboard/layouts', 'LayoutController@index')->name('layouts');
Route::get('/dashboard/layout/create', 'LayoutController@create')->name('create_layout');
Route::post('/dashboard/layout/store', 'LayoutController@store')->name('store_layout');
Route::get('/dashboard/layout/{id}/edit', 'LayoutController@edit')->name('edit_layout');
Route::delete('/dashboard/layout/{id}/delete', 'LayoutController@destroy')->name('delete_layout');
Route::patch('/dashboard/layout/{id}/update', 'LayoutController@update')->name('update_layout');
这是我得到的错误
这是脚本需要移到底部的路径。
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/jquery-ui.js') }}"></script>
<script src="{{ asset('js/Sortable.js') }}"></script>
<script src="{{ asset('js/jquery-sortable.js') }}"></script>
<script src="{{ asset('js/codemirror.js') }}"></script>
<script src="{{ asset('js/main.js') }}"></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/all.min.css') }}" rel="stylesheet" >
<link href="{{ asset('css/codemirror.css') }}" rel="stylesheet" >
<link rel="stylesheet" href="{{ asset('css/styles.css') }}">
</head>
<body style="background: #ffffff">
<div class="">
<nav class="sidebar">
<ul class="list-unstyled">
<li class="sidebar-item title">Information</li>
<li class="sidebar-item"><a href="{{ route('home') }}" class="sidebar-link {{ Route::currentRouteNamed('home') ? 'sidebar-active' : '' }}">Dashboard</a></li>
<li class="sidebar-item title">Content</li>
<li class="sidebar-item"><a href="{{ route('pages') }}" class="sidebar-link {{ Route::currentRouteNamed('pages') ? 'sidebar-active' : '' }}">Pages</a></li>
<li class="sidebar-item"><a href="{{ route('blocks') }}" class="sidebar-link {{ Route::currentRouteNamed('blocks') ? 'sidebar-active' : '' }}">Blocks</a></li>
<li class="sidebar-item"><a href="{{ route('layouts') }}" class="sidebar-link {{ Route::currentRouteNamed('layouts') ? 'sidebar-active' : '' }}">Layouts</a></li>
<li class="sidebar-item title">System</li>
<li class="sidebar-item"><a href="{{ route('users') }}" class="sidebar-link {{ Route::currentRouteNamed('users') ? 'sidebar-active' : '' }}">Users</a></li>
<li class="sidebar-item"><a href="{{ route('roles') }}" class="sidebar-link {{ Route::currentRouteNamed('roles') ? 'sidebar-active' : '' }}">Roles</a></li>
<li class="sidebar-item title">Other</li>
<li class="sidebar-item"><a href="">Preferences</a></li>
</ul>
</nav>
<div class="dashboard-container">
<div id="app">
@yield('content')
</div>
</div>
</div>
</body>
</html>
我尝试通过文本编辑器（PHPStorm）而不是我自己的mini cms手动移动脚本，但是结果是相同的。我得到了那个大错误。您可以在错误消息中看到所有的/n新行，并且我尝试使用FILE_IGNORE_NEW_LINES来修复它，正如您在代码中看到的那样，但是它没有任何改变。是什么原因造成的？如何解决？
完整的错误消息（很长）
app.js:38033 [Vue warn]: Error compiling template:
invalid expression: Unexpected token '>' in
"<!doctype html>\n<html lang=\""+_s(str_replace('_', '-', app()->getLocale()))+"\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n <!-- CSRF Token -->\n <meta name=\"csrf-token\" content=\""+_s(csrf_token())+"\">\n\n <title>"+_s(config('app.name', 'Laravel'))+"</title>\n\n <!-- Scripts -->\n <script src=\""+_s(asset('js/app.js'))+"\" defer></script>\n\n <!-- Fonts -->\n <link rel=\"dns-prefetch\" href=\"//fonts.gstatic.com\">\n <link href=\"https://fonts.googleapis.com/css?family=Nunito\" rel=\"stylesheet\">\n\n <!-- Styles -->\n <link href=\""+_s(asset('css/app.css'))+"\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\""+_s(asset('css/styles.css'))+"\">\n\n</head>\n<body style=\"background: #ffffff\">\n <div id=\"\">\n <nav class=\"navbar navbar-expand-md navbar-light bg-white\">\n <div class=\"container\">\n <a class=\"navbar-brand\" href=\""+_s(url('/'))+"\">\n "+_s(config('app.name', 'Laravel'))+"\n </a>\n <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\""+_s(__('Toggle navigation'))+"\">\n <span class=\"navbar-toggler-icon\"></span>\n </button>\n\n <div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\">\n <!-- Left Side Of Navbar -->\n\n\n <!-- Right Side Of Navbar -->\n <ul class=\"navbar-nav ml-auto\">\n <li class=\"nav-item\"><a class=\"nav-link\" href=\"\">About me</a></li>\n <li class=\"nav-item\"><a class=\"nav-link\" href=\"\">Projects</a></li>\n <li class=\"nav-item\"><a class=\"nav-link\" href=\"\">Services</a></li>\n <li class=\"nav-item\"><a class=\"nav-link\" href=\"\">Experiences</a></li>\n </ul>\n </div>\n </div>\n </nav>\n\n <main class=\"py-4\">\n <div class=\"container mt-5\">\n @yield('content')\n </div>\n </main>\n </div>\n</body>\n</html>"
Raw expression: <!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/styles.css') }}">
</head>
<body style="background: #ffffff">
<div id="">
<nav class="navbar navbar-expand-md navbar-light bg-white">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="">About me</a></li>
<li class="nav-item"><a class="nav-link" href="">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="">Services</a></li>
<li class="nav-item"><a class="nav-link" href="">Experiences</a></li>
</ul>
</div>
</div>
</nav>
<main class="py-4">
<div class="container mt-5">
@yield('content')
</div>
</main>
</div>
</body>
</html>
1 | <div id="app">
| ^^^^^^^^^^^^^^
2 | <div class="container-fluid pt-5">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
3 | <div class="row">
| ^^^^^^^^^^^^^^^^^^^^^^^^^
4 | <div class="col-md-12">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
5 | <h3>Create new layout</h3>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
6 | </div>
| ^^^^^^^^^^^^^^^^^^
7 | </div>
| ^^^^^^^^^^^^^^
8 | <div class="row my-5">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
9 | <div class="col-md-6">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
10 | <form method="POST" action="http://rainierlaan.test/dashboard/layout/3/update">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
11 | <input type="hidden" name="_token" value="MXEoSb44dBa3l3lmtipDT843j50vTOTGcjXsP7eq">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
12 | <input type="hidden" name="_method" value="PATCH">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
13 | <div class="form-group">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
14 | <label for="name">Name</label>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
15 | <input type="text" class="form-control" name="name" value="app">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
16 | </div>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
17 | <div class="form-group">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
18 | <label for="content" class="content">Content</label>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
19 | <textarea name="content" id="" class="code-editor" cols="30" rows="10"><!doctype html>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
20 | <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
21 | <head>
| ^^^^^^^^^^^^
22 | <meta charset="utf-8">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
23 | <meta name="viewport" content="width=device-width, initial-scale=1">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
24 |
|
25 | <!-- CSRF Token -->
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
26 | <meta name="csrf-token" content="{{ csrf_token() }}">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
27 |
|
28 | <title>{{ config('app.name', 'Laravel') }}</title>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
29 |
|
30 | <!-- Scripts -->
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
31 | <script src="{{ asset('js/app.js') }}" defer></script>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
32 |
|
33 | <!-- Fonts -->
| ^^^^^^^^^^^^^^^^^^^^^^^^
34 | <link rel="dns-prefetch" href="//fonts.gstatic.com">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
35 | <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
36 |
|
37 | <!-- Styles -->
| ^^^^^^^^^^^^^^^^^^^^^^^^^
38 | <link href="{{ asset('css/app.css') }}" rel="stylesheet">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
39 | <link rel="stylesheet" href="{{ asset('css/styles.css') }}">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
40 |
|
41 | </head>
| ^^^^^^^^^^^^^
42 | <body style="background: #ffffff">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
43 | <div id="">
| ^^^^^^^^^^^^^^^^^^^^^
44 | <nav class="navbar navbar-expand-md navbar-light bg-white">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
45 | <div class="container">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
46 | <a class="navbar-brand" href="{{ url('/') }}">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
47 | {{ config('app.name', 'Laravel') }}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
48 | </a>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
49 | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
50 | <span class="navbar-toggler-icon"></span>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
51 | </button>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
52 |
|
53 | <div class="collapse navbar-collapse" id="navbarSupportedContent">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
54 | <!-- Left Side Of Navbar -->
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
55 |
|
56 |
|
57 | <!-- Right Side Of Navbar -->
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
58 | <ul class="navbar-nav ml-auto">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
59 | <li class="nav-item"><a class="nav-link" href="">About me</a></li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
60 | <li class="nav-item"><a class="nav-link" href="">Projects</a></li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
61 | <li class="nav-item"><a class="nav-link" href="">Services</a></li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
62 | <li class="nav-item"><a class="nav-link" href="">Experiences</a></li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
63 | </ul>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
64 | </div>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
65 | </div>
| ^^^^^^^^^^^^^^^^^^^^^^^^
66 | </nav>
| ^^^^^^^^^^^^^^^^^^^^
67 |
|
68 | <main class="py-4">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
69 | <div class="container mt-5">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
70 | @yield('content')
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
71 | </div>
| ^^^^^^^^^^^^^^^^^^^^^^^^
72 | </main>
| ^^^^^^^^^^^^^^^^^^^^^
73 | </div>
| ^^^^^^^^^^^^^^^^
74 | </body>
| ^^^^^^^^^^^^^
75 | </html></textarea>
| ^^^^^^^^^^^^^^^^^^^^^^^^
76 | </div>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
77 | <div class="form-group">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
78 | <button type="submit" class="btn btn-primary">Edit layout</button>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
79 | </div>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
80 | </form>
| ^^^^^^^^^^^^^^^^^^^^^^^
81 | </div>
| ^^^^^^^^^^^^^^^^^^
82 |
|
83 | </div>
| ^^^^^^^^^^^^^^
84 | </div>
| ^^^^^^^^^^
85 | </div>
| ^^^^^^^^^^^^
(found in <Root>)
warn @ app.js:38033
(anonymous) @ app.js:49101
compileToFunctions @ app.js:49100
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:49324
Vue._init @ app.js:42411
Vue @ app.js:42477
./resources/js/app.js @ app.js:49478
__webpack_require__ @ app.js:20
0 @ app.js:49616
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
app.js:46463 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
app.js:10265 jQuery.Deferred exception: Cannot read property 'value' of undefined TypeError: Cannot read property 'value' of undefined
at Function.fromTextArea (http://rainierlaan.test/js/codemirror.js:9639:30)
at HTMLDocument.<anonymous> (http://rainierlaan.test/js/main.js:17:29)
at mightThrow (http://rainierlaan.test/js/app.js:9981:29)
at process (http://rainierlaan.test/js/app.js:10049:12) undefined
jQuery.Deferred.exceptionHook @ app.js:10265
process @ app.js:10053
setTimeout (async)
(anonymous) @ app.js:10087
fire @ app.js:9715
fireWith @ app.js:9845
fire @ app.js:9853
fire @ app.js:9715
fireWith @ app.js:9845
ready @ app.js:10325
completed @ app.js:10335
app.js:10274 Uncaught TypeError: Cannot read property 'value' of undefined
at Function.fromTextArea (codemirror.js:9639)
at HTMLDocument.<anonymous> (main.js:17)
at mightThrow (app.js:9981)
at process (app.js:10049)
fromTextArea @ codemirror.js:9639
(anonymous) @ main.js:17
mightThrow @ app.js:9981
process @ app.js:10049
setTimeout (async)
jQuery.readyException @ app.js:10273
(anonymous) @ app.js:10293
mightThrow @ app.js:9981
process @ app.js:10049
setTimeout (async)
(anonymous) @ app.js:10087
fire @ app.js:9715
fireWith @ app.js:9845
fire @ app.js:9853
fire @ app.js:9715
fireWith @ app.js:9845
process @ app.js:10069
setTimeout (async)
(anonymous) @ app.js:10087
fire @ app.js:9715
fireWith @ app.js:9845
fire @ app.js:9853
fire @ app.js:9715
fireWith @ app.js:9845
ready @ app.js:10325
completed @ app.js:10335
编辑：：
编辑视图
@extends('layouts.layouts.backend')
@section('content')
<div class="container-fluid pt-5">
<div class="row">
<div class="col-md-12">
<h3>Create new layout</h3>
</div>
</div>
<div class="row my-5">
<div class="col-md-6">
<form method="POST" action="{{ route('update_layout', ['id' => $layout->id]) }}">
{{ csrf_field() }}
{{ method_field('PATCH') }}
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" value="{{ $layout->name }}">
</div>
<div class="form-group">
<label for="content" class="content">Content</label>
<textarea name="content" id="" class="code-editor" cols="30" rows="10">{{ $layout->content }}</textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Edit layout</button>
</div>
</form>
</div>
</div>
</div>
@endsection
1 个答案:
答案 0 :(得分：-1)
在刀片文件中，有一个文本区域为
<textarea name="content" id="" class="code-editor" cols="30" rows="10">
{{ $layout->content }}
</textarea>
此{{ $layout->content }}在您的DOM中产生了一些刀片语法，这也是Vue语法；但是这些不应该处理vue。因此，请尝试转义{{1 }}到{{ whateverValue }}
在我的情况下，在将它们保存或存储到数据库之前，我在控制器中执行以下代码。
\{\{ whateverValue \}\}这里有两个演示
没有转义双大括号，导致错误
$body = preg_replace('/\{\{/','\{\{',$body);
$body = preg_replace('/\}\}/','\}\}',$body);
const app = new Vue({
el: "#app",
data: {}
})
转义双大括号，不会出现错误
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="container-fluid pt-5">
<div class="row">
<div class="col-md-12">
<h3>Create new layout</h3>
</div>
</div>
<div class="row my-5">
<div class="col-md-6">
<form method="POST" action="http://rainierlaan.test/dashboard/layout/3/update">
<input type="hidden" name="_token" value="MXEoSb44dBa3l3lmtipDT843j50vTOTGcjXsP7eq">
<input type="hidden" name="_method" value="PATCH">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" value="app">
</div>
<div class="form-group">
<label for="content" class="content">Content</label>
<textarea name="content" id="" class="code-editor" cols="30" rows="10"><!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/styles.css') }}">
</head>
<body style="background: #ffffff">
<div id="">
<nav class="navbar navbar-expand-md navbar-light bg-white">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{\{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="">About me</a></li>
<li class="nav-item"><a class="nav-link" href="">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="">Services</a></li>
<li class="nav-item"><a class="nav-link" href="">Experiences</a></li>
</ul>
</div>
</div>
</nav>
<main class="py-4">
<div class="container mt-5">
@yield('content')
</div>
</main>
</div>
</body>
</html></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Edit layout</button>
</div>
</form>
</div>
</div>
</div>
</div>const app = new Vue({
el: "#app",
data: {}
})
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？