Question

我正在尝试使用我创建的Laravel 5.5项目中的组件，但出于某种原因它没有显示。

我尝试使用创建的方法显示消息，但我也没有得到答案，这让我觉得组件没有被加载，我已经用div app封装了div中的所有内容。

我已经使用了npm update，刷新并删除了缓存，但是它仍然无效，我该怎么办？

这是我的代码：

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>

vue js的组件未显示

0 个答案: