Question

对不起，我的英语太差了！

档案：app.js

window.auth_id = 0;
Vue.component('block-header-user-control', require('./HeaderComponent.vue'));
new Vue({
    el: '#application'
});

File HeaderComponent.vue

<template lang="html">
    <header-guest v-if="!auth"></header-guest>
    <header-auth v-else></header-auth>
</template>

<script>

    import HeaderGuest from './HeaderUserGuest.vue';
    import HeaderAuth from './HeaderUserAuth.vue';

    export default {
        data: function () {
            return {
                auth: window.auth_id
            }
        },
        components: {
            'header-guest': HeaderGuest,
            'header-auth': HeaderAuth,
        },
        methods: {},
    }
</script>

文件：HeaderUserGuest.vue

<script>
    export default {
        template: '#header-user-auth', // Not working,
        // template: `<div>cascaaSA</div>`, // working
        data() {
            return {}
        },
        mounted() {
            console.log('Created Guest');
        },
    }
</script>

文件：HeaderUserAuth.vue

<script>
    export default {
        template: '#header-user-auth',
        name: 'header-auth',
        data() {
            return {}
        },
        created() {
            console.log('Created Auth');
        },
    }
</script>

文件：index.blade.php

<div id="application">
    <script type="text/x-template" id="header-user-guest">
       Guest
    </script>
    <script type="text/x-template" id="header-user-auth">
       Logged
    </script>
    <block-header-user-control></block-header-user-control> 
</div>

“Created Guest”显示在浏览器控制台中，但“block-header-user-control”菜单不显示“Guest”。

请帮帮我。特别感谢!!

====================

谢谢大家！它适用于HTML。文字不起作用

<div id="application">
    <script type="text/x-template" id="header-user-guest">
       <div>Guest</div>
    </script>
    <script type="text/x-template" id="header-user-auth">
       <div>Logged</div>
    </script>
    <block-header-user-control></block-header-user-control> 
</div>

Answer 1

您可能需要将模板移到应用范围之外 - 将它们移到'use strict'; let moment = require('moment'); let ma = new moment('2018-05-27T19:12:29.810Z'); let mb = new moment('2018-05-27T19:13:12.739Z'); console.log('Difference in hours => ', mb.diff(ma, 'hours')); console.log('Difference in minutes => ', mb.diff(ma, 'minutes')); console.log('Difference in seconds => ', mb.diff(ma, 'seconds'));下面。

Laravel，Vue组件模板没有显示？

1 个答案: