达维营-前端网laravel中使用vue渲染时出现如下错误提示
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.大概意思是script脚本无法渲染，导致的提示。在网上查了许久，未果。
@extends('layouts.app')
@section('content')
@include('vendor.ueditor.assets')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">发布问题</div>
<div class="card-body">
<!-- 编辑器容器 -->
<form action="/questions" method="post">
@csrf
{{--{!! csrf_field() !!}--}}
<div class="form-group {{$errors->has('title')?' has-error':''}}">
{{--<lable for="title">标题</lable>--}}
<label for="title">标题</label>
<input type="text" name="title" class="form-control" placeholder="标题"
value="{{ old('title') }}">
@if($errors->has('title'))
<span class="text-danger">
<strong>{{$errors->first('title')}}</strong>
</span>
@endif
</div>
<script id="container" name="body" type="text/plain">
{!! old('body') !!}
</script>
@if($errors->has('body'))
<span class="text-danger">
{{$errors->first('body')}}
</span>
@endif
<button class="btn btn-success float-right" type="submit">发布问题</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
ue.ready(function () {
ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置 CSRF token.
});
</script>
@endsection此脚本出现错误提示4处，全部是script渲染问题。
经检查，@include(‘vendor.ueditor.assets’)引入了3个js,提示3处，代码末实例化编辑器提示一处。于是我把
@include(‘vendor.ueditor.assets’) 换了个位置，将实例化编辑器写入到单独的js中，进行引入，错误提示全部消除。但是@include(‘vendor.ueditor.assets’)这个内容全部渲染到html标签外了，解决方法见文末。
@extends('layouts.app')
@include('vendor.ueditor.assets')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">发布问题</div>
<div class="card-body">
<!-- 编辑器容器 -->
<form action="/questions" method="post">
@csrf
{{--{!! csrf_field() !!}--}}
<div class="form-group {{$errors->has('title')?' has-error':''}}">
{{--<lable for="title">标题</lable>--}}
<label for="title">标题</label>
<input type="text" name="title" class="form-control" placeholder="标题"
value="{{ old('title') }}">
@if($errors->has('title'))
<span class="text-danger">
<strong>{{$errors->first('title')}}</strong>
</span>
@endif
</div>
<script id="container" name="body" type="text/plain">
{!! old('body') !!}
</script>
@if($errors->has('body'))
<span class="text-danger">
{{$errors->first('body')}}
</span>
@endif
<button class="btn btn-success float-right" type="submit">发布问题</button>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection从上面的代码看
<script id="container" name="body" type="text/plain">
{!! old('body') !!}
</script>这段代码并没有提示错误，难道因为type是text/plain
经验证<script></script>或<script type=”text/javascript”></script>在section里与其他脚本标签{{}}混写，渲染时会提示错误。
把脚本放到单独的section里就不再提示错误。
解决方案
通过一番折腾，错误其实就是
<script></script>或<script type=”text/javascript”></script> 当然还有可能是<style></style>这些脚本与需要渲染的laravel模板标签或vue标签混写到一个代码块导致vue无法正常渲染所致，因此通过以下方法可以解决：
在母板中插入
@yield('script')在子页面中写入
@section('script')
@include('vendor.ueditor.assets')
<script>
// 实例化编辑器
var ue = UE.getEditor('container');
ue.ready(function () {
ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置 CSRF token.
});
</script>
@endsection如果是style也可以在母板中定义@yield(‘style’);当然你也可以根据自己的喜好定义块名称。最后粘上更正后的代码：
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">发布问题</div>
<div class="card-body">
<!-- 编辑器容器 -->
<form action="/questions" method="post">
@csrf
{{--{!! csrf_field() !!}--}}
<div class="form-group {{$errors->has('title')?' has-error':''}}">
{{--<lable for="title">标题</lable>--}}
<label for="title">标题</label>
<input type="text" name="title" class="form-control" placeholder="标题"
value="{{ old('title') }}">
@if($errors->has('title'))
<span class="text-danger">
<strong>{{$errors->first('title')}}</strong>
</span>
@endif
</div>
<script id="container" name="body" type="text/plain">
{!! old('body') !!}
</script>
@if($errors->has('body'))
<span class="text-danger">
<strong>{{$errors->first('body')}}</strong>
</span>
@endif
<button class="btn btn-success float-right" type="submit">发布问题</button>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('script')
@include('vendor.ueditor.assets')
<script>
// 实例化编辑器
var ue = UE.getEditor('container');
ue.ready(function () {
ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置 CSRF token.
});
</script>
@endsection