laravel - vue js的组件没有显示
问题描述
我试图在我创建的 Laravel 5.5 项目中使用一个组件,但由于某种原因它没有显示。
我尝试使用创建的方法显示消息,但我也没有得到答案,这让我认为组件没有被加载,我已将所有内容都包含在 id 为 app 的 div 中。
我已经使用了 npm update,并刷新并擦除了缓存,但它仍然无法正常工作,我该怎么办?
这是我的代码:
通知.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>
应用程序.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>
解决方案
推荐阅读
- c - 删除数组中的空内容并在 C 中对数组进行排序
- python - Python - datetime.now() 返回不正确的时间
- sql - 对两个表进行分组并对结果 VBA ADODB SQL 查询执行左连接
- java - 线性布局java和xml
- sql-server - 根据 UPDATE 结果有条件地使用 SQL OUTPUT 子句
- hadoop - 是否可以将弹性搜索查询转换为可以在 hadoop 上应用相同过滤逻辑的东西?
- java - Do-While 循环用户输入不循环
- reactjs - setState 多变量的三元
- haskell - IHaskell 和 Latex
- java - 是否可以让 Jackson ObjectMapper 在 Spring Boot 应用程序中遵守 JAXB XML 注释?