如何在隐藏的 HTML 元素中呈现 Vue 组件

Question

在我的应用程序中，我的右侧滑动条包含代表系统通知的 Vue 组件。默认情况下，右侧栏是隐藏的（在屏幕之外），当用户打开它时，右侧栏是空白的（意味着不显示任何组件）。在 DevTools 中，我可以看到 Vue 组件没有被渲染

但是，如果我将 right.blade.php 中的相同代码放入任何普通视图，则将显示每个通知。

到目前为止，我的假设是，Vue 无法在隐藏的 HTML 中呈现组件。我说的对吗？

这里是展示 PHP 代码和没有 Vue 组件的屏幕截图，以及代码本身：

右栏截图

rightbar.blade.php

<div id="rightbar" class="rightbar">
    <div class="mt-2">
        <ul class="nav nav-tabs2">
            <li class="nav-item"><a class="nav-link active show" data-toggle="tab" href="#notifications">Notifications</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#channels">Channels</a></li>
        </ul>
        <hr>
        <div class="tab-content">
            <div class="tab-pane show active" id="notifications">
                @foreach(auth()->user()->unreadNotifications as $key => $notification)
                        <p>here</p>    //<---------------------------this works
                        <notification props_id="{{$notification->id}}"
                                      props_route="{{route('item.show',$notification['data']['item']).'#documents'}}"
                                      props_title="New item uploaded"
                                      props_body="User {{$notification['data']['name']}} uploaded {{$notification['data']['item']}}"
                                      props_date="{{$notification->created_at}}">
    
                        </notification> //<------------------------- this doesn't works
                @endforeach
            </div>

            <div class="tab-pane" id="channels">
                <p>channel 1</p>
                <p>channel 2</p>
                <p>channel 3</p>
            </div>
        </div>
    </div>
</div>

Notification.vue

<template>
    <transition name="slide-fade">
        <div class="card" v-show="showNotification" >
            <div class="header">
                <h2 v-text="title"></h2>
                <ul class="header-dropdown dropdown">
                    <li><a href="javascript:void(0);" @click="deleteNotification()"><i class="fa fa-close"></i></a></li>
                </ul>
            </div>
            <div style="cursor:pointer" @click="openSubject()">
                <div class="card-body">
                    <p class="card-text" v-text="body"></p>
                </div>
                <div class="card-footer">
                    <small class="text-muted" v-text="date"></small>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
    export default {
        props: {
            props_id:     String,
            props_route:  String,
            props_title:  String,
            props_body:   String,
            props_date:   String,
        },
        name: "Notification",
        data(){
            return{
                id:       this.props_id,
                route:    this.props_route,
                title:    this.props_title,
                body:     this.props_body,
                date:     this.props_body,
                showNotification: true,
            }
        },
        methods:{
            openSubject(){
                location.href = this.route;
                this.markAsRead()
            },
           markAsRead(){
               axios
                   .put("/notifications/"+this.id)
                   .then(response => {
                       this.deleteNotification()
                   })
                   .catch(error => console.log(error))
           },
            deleteNotification(){
                this.showNotification = false;
            },

        },
        mounted() {
            console.log('Vue notification')
        }
    }

</script>

<style>

.slide-fade-enter-active {
    transition: all .3s ease;
}
.slide-fade-leave-active {
    transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active below version 2.1.8 */ {
    transform: translateX(1000px);
    opacity: 0;
}
</style>

app.js

Vue.component('notification', require('./components/Notification.vue').default);

rightbar.scss

.rightbar{
    @include box-shadow(0 5px 10px 0px rgba($dark,.3));
    @include transition(all .3s ease-in-out);
    background: $body-color;
    position: fixed;
    top: 0;
    right: -500px;
    width: 500px;
    height: 100vh;
    overflow-y: scroll;
    z-index: 13;
    padding: 8px 20px;

    &.open{
        right: 0;
    }

    @include max-screen($break-medium) {
        width: 450px;
    }
    @include max-screen($break-small - 1px) {
        width: 340px;
    }

    .chat_detail{
        display: block;
        position: relative;

        .chat-widget{
            height: calc(100vh - 200px);
            overflow-y: auto;
        }

        .input-group{
            position: fixed;
            bottom: 10px;
            width: 460px;

            @include max-screen($break-medium) {
                width: 410px;
            }
            @include max-screen($break-small - 1px) {
                width: 300px;
            }
        }
    }
}

Answer 1

您的 DevTools 屏幕截图显示 <notification> 而不是组件的渲染元素，表明该组件实际上并未注册。

我会在你的视图中检查组件注册。