Question

我有以下laravel布局模板：

<html lang="en">
<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link href="{{ URL::asset('css/libs.css') }}" rel="stylesheet">

    <link href="{{ URL::asset('css/app.css') }}" rel="stylesheet">

    @yield('styles')

    @yield('scripts.header')

 </head>
 <body>

    <div id="app">

        <div class="main-container">
            <div class="ad ad-leaderboard hidden-xs">
                <script>
                       function onSubmit(token) {
                           $("#register-form").submit();
                       }
                </script>
            </div>

            @include('layouts.partials.header')

            <div id="main">
                @yield('content')
            </div>

            @include('layouts.partials.footer')

        </div>
    </div>

    <!-- Jquery, Bootstrap, Moment, DatetimePicker, Sweetalert, Select2 -->
    <script src="{{ URL::asset('js/libs.js')}}"></script>

    <!-- Custom -->
    <script src="{{ URL::asset('js/app.js')}}"></script>

    @yield('scripts.footer')


   </body>
</html>

在<script src="{{ URL::asset('js/app.js')}}"></script>中，我需要设置Vue：

const app = new Vue({
   el: '#app'
});

现在我有一些要添加到我的内容中的google add脚本，但是我得到了控制台中的[Vue warn]: Error compiling template:错误。

我只在几页上使用Vue组件，因此我应该将以上的vue声明移出app.js并移至专用页面，或者有更好的替代方法来组织此声明，以便将声明保留在主布局页面而不必继续在单独的页面上重复，但是仍然可以内嵌javascript？

Answer 1

这是因为<script> div中的#app标记。

<script>
    function onSubmit(token) {
        $("#register-form").submit();
    }
</script>

您应该使用其他JS将其移至文档末尾。

编辑

或者，您可能会看到类似的内容，以允许您将脚本添加到Vue组件。
https://github.com/TheDynomike/vue-script-component

然后，您可以为每个广告脚本创建一个Vue组件，您可以将其放入需要的页面中。

在元素Vue vm中包含脚本标签将导致抛出模板错误

1 个答案: