Vue.JS 组件未出现

Question

我试图在 Vue 路由器仪表板页面上使用 Vue Material，但我试图将面板存储在一个单独的文件中。我完全不知道为什么这不起作用，我花了最后 2 个小时在谷歌上搜索这个问题，但我什么也没有。即使使用 Vue chrome 扩展也不会显示它，这排除了样式。在组件上放置红色背景颜色确实有效，但仍然无效。另外，请原谅我的错误代码——我已经使用 Vue 大约 3 天了。

<template>
    <div class="page-container md-layout-row">
        <md-app>
            <md-app-toolbar class="md-primary">
                <span class="md-title">{{ usernameTitleCase }}</span>
            </md-app-toolbar>
            <PagePanel></PagePanel>
            <md-app-content>
                <div class="user">
                    <h1>{{ user.username }}</h1>
                    <h2>{{ user.customThing }}</h2>
                    <h3>{{ user.id }}</h3>
                </div>
            </md-app-content>
        </md-app>
    </div>
</template>

<script>
    import PagePanel from '@/components/panel.vue';

    export default {
        name: 'Dashboard',
        components: {
            PagePanel
        },
        data() {
            return {}
        },
        computed: {
            usernameTitleCase() {
                const letters = this.user.username.split('');
                letters[0] = letters[0].toUpperCase();
                return letters.join('')
            }
        },
        created() {
            this.user = JSON.parse(localStorage.getItem('user'));
        }
    }
</script>

<style>
    .md-app {
        min-height: 350px;
    }

    .md-drawer {
        width: 230px;
        max-width: calc(100vw - 125px);
    }
</style>

此处的组件文件：

<template>
    <md-app-drawer md-permanent="full">
        <md-toolbar class="md-transparent" md-elevation="0">
            Navigation
        </md-toolbar>

        <md-list>
            <md-list-item>
                <md-icon>move_to_inbox</md-icon>
                <span class="md-list-item-text">Inbox</span>
            </md-list-item>

            <md-list-item>
                <md-icon>send</md-icon>
                <span class="md-list-item-text">Sent Mail</span>
            </md-list-item>

            <md-list-item>
                <md-icon>delete</md-icon>
                <span class="md-list-item-text">Trash</span>
            </md-list-item>

            <md-list-item>
                <md-icon>error</md-icon>
                <span class="md-list-item-text">Spam</span>
            </md-list-item>
        </md-list>
    </md-app-drawer>
</template>

<script>
    export default {
        name: 'PagePanel'
    }
</script>

我也没有处于生产模式，并且在控制台中没有收到任何错误。

Answer 1

不容易发现，但在 this page of the VueMaterial docs 的末尾，它说：

In these examples we have 3 distinct areas: Toolbar, Drawer and Content. You should create them using the following tags:

md-app-toolbar: ...

md-app-drawer: ...

md-app-content: ...

Any other tag passed as a direct child of the md-app tag will be ignored. The component will only look for these three tags and choose the right placement for them.

幸运的是，它们 added the ability to use slots（但没有记录它们，您必须查看合并请求才能看到）。您可以像这样使用它们：

<template>
    <div class="page-container md-layout-row">
        <md-app>
            <md-app-toolbar> ... </md-app-toolbar>
            <page-panel slot="md-app-drawer"></page-panel>
            <md-app-content> ... </md-app-content>
        </md-app>
    </div>
</template>

但是，请注意 slot 值只能是上面定义的 3 个值之一。

Vue.JS 组件未出现

Vue.JS Component Not Appearing

javascript

vue.js

vue-component

vue-material