vue.js 模板內 laravel 刀片

Question

在我們的項目中，對於 Vue.js 的模板，我們使用 x-templates 在單獨的 Blade 文件中編寫組件，如下所示：

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

我遇到的問題是 x-template 內容最近在其他刀片文件內容之后加載。

這是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>

這是 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

這是 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',
    });
});

如何同時加載所有內容？ 謝謝。

Answer 1

Blade 文件用於服務器渲染，而 vue 模板用於客戶端，這就是它“較慢”的原因。 在您的情況下，您可能希望隱藏頁面，直到 vue 完成加載。 查看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