vue.js 模板内 laravel 刀片

Question

in our project, for templates for Vue.js, we write components in separate Blade files using x-templates like this:在我们的项目中，对于 Vue.js 的模板，我们使用 x-templates 在单独的 Blade 文件中编写组件，如下所示：

<script type="x/templates" id="nameOfComponent">

The problem I have is that x-template content loading lately after other blade file content.我遇到的问题是 x-template 内容最近在其他刀片文件内容之后加载。

this is master.blade.php这是master.blade.php

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>@yield('title', 'base')</title>

    </head>
    <body>
        <div id="app">
            @yield('content')
        </div>
              
        <script src="{{ asset('js/app.js') }}"></script>

        @stack('scripts')
        @yield('script')

    </body>
</html>

and this is index.blade.php这是 index.blade.php

test home page

<my-checkbox></my-checkbox>

@push('scripts')
    <script type="text/x-template" id="checkbox-template">
        <div class="checkbox-wrapper" @click="check">
        <div :class="{ checkbox: true, checked: checked }"></div>
        <h1>checkbox</h1>
        <div class="title">@{{ title }}</div>
        </div>
    </script>

    <script>
        Vue.component('my-checkbox', {
            template: '#checkbox-template',
            data() {
                return { checked: false, title: 'Check me' }
            },
            methods: {
                check() { this.checked = !this.checked; }
            }
        });
    </script>
@endpush

and this is app.js这是 app.js

window.Vue = require('vue');



window.addEventListener("load", function (event) {
    Vue.component('example-component', require('./components/ExampleComponent.vue').default);
    
    const app = new Vue({
        el: '#app',
    });
});

how can I make all content loading in the same time?如何同时加载所有内容？ thanks.谢谢。

Answer 1

Blade file is for server rendering and vue template is for client one, that's why it's "slower". Blade 文件用于服务器渲染，而 vue 模板用于客户端，这就是它“较慢”的原因。 In your case you may want to hide the page till vue finishes loading.在您的情况下，您可能希望隐藏页面，直到 vue 完成加载。 Checkout the v-cloak directive.查看v-cloak指令。 For more detail: https://v2.vuejs.org/v2/api/#v-cloak更多细节： https://v2.vuejs.org/v2/api/#v-cloak

vue.js 模板内 laravel 刀片

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-07-26 13:10:32

vue.js 模板内 laravel 刀片

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-07-26 13:10:32

解决方案1
2 已采纳 2020-07-26 13:10:32