Я пытаюсь использовать компонент в своем проекте Laravel 5.5, который я создал, но по какой-то причине он не отображается.
Я пытался показать сообщения, используя созданный метод, но я также не получаюответы, которые заставляют меня думать, что компонент не загружается, я вложил все в div с приложением id.
Я использовал обновление npm, обновил и стер кэш, однако он все еще не работает,что мне делать?
это мой код:
Notification.vue
<template>
<div>
<ul>
<li>
<a class="dropdown-button" href="#!" data-activates="dropdown2">notificaciones
<span class="new badge">{{unreads.length}}</span>
<i class="material-icons right">arrow_drop_down</i>
</a>
</li>
</ul>
<ul id="dropdown2" class="dropdown-content">
<li class="divider"></li>
</ul>
</div>
</template>
<script>
export default {
props: ["unreads", "userid"],
created: function () {
alert("test")
},
mounted() {
console.log('Component mounted.')
Echo.private('App.User.' + this.userid)
.notification((notification) => {
console.log(notification.type);
});
}
}
</script>
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('notification', require('./components/Notification.vue').default);
Vue.component('test', require('./components/test.vue'));
const app = new Vue({
el: '#app',
components: {
notification,
}
});
мой файл макета
app.blade.php
<!DOCTYPE html>
<html lang="en">
@section('htmlheader')
@include('layouts.partials.htmlheader')
@show
<body >
<div id="app">
@include('layouts.partials.mainheader')
<div class="wrapper">
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content">
<!-- Your Page Content Here -->
@yield('main-content')
</section><!-- /.content -->
</div><!-- /.content-wrapper -->
@include('layouts.partials.footer')
@include('layouts.partials.modals')
</div><!-- ./wrapper -->
</div>
@section('scripts')
@include('layouts.partials.scripts')
@show
@yield('pagescript')
</body>
</html>
здесь я пытаюсь показать компонент
mainheader.blade.php
<!-- Dropdown Structure-->
<ul id="dropdown1" class="dropdown-content">
<li><a href="upperbody.html">Upper Body</a></li>
<li><a href="lowerbody.html">Lower Body</a></li>
<li><a href="core.html">Core</a></li>
<li><a href="conditioning.html">Conditioning</a></li>
<li class="divider"></li>
</ul>
<nav>
{{---Notifications ---}}
<notification :userid="{{auth()->id()}}" :unreads="{{auth()->user()->unreadNotifications}}"></notification>
{{---------------}}
@section('sidebar')
@if(Auth::check())
@include('layouts.partials.sidebar_auth')
@else
@include('layouts.partials.sidebar')
@endif
@show
</div>
</nav>