欢迎光临
我们一直在努力

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.

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
赞(0)
版权归原作者所有,如有侵权请告知。达维营-前端网 » 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.

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址