Блог

В моем приложении у меня есть правая панель слайдов, которая содержит компоненты 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>

  

Уведомление.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);
  

правая панель.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;

    amp;.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;
            }
        }
    }
}

  

На вашем скриншоте DevTools вместо отображаемых элементов компонента показаны <notification> , что указывает на то, что компонент фактически не зарегистрирован.

Я бы проверил регистрацию компонента в вашем представлении.