我试图将一些功能,即NavBar上的Laravel Spark下拉到我的app.blade.php。
我的代码看起来像这样
<body class="skin-1">
<!-- Wrapper-->
<div id="spark-app" v-cloak>
<!-- Navigation -->
@include('layouts.wf_navigation')
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg">
<!-- Main view -->
@yield('content')
<!-- Footer -->
@include('layouts.footer')
</div>
<!-- End page wrapper-->
</div>
<!-- End wrapper-->
@show
<script src="/js/app.js"></script>
但是我收到了错误
未捕获的ReferenceError:未定义总线
错误引用了APp.js中的这行代码
Bus.$on('updateUser', function () {
self.getUser();
})
更新
Bus变量在App.js中定义,代码如下所示
if (window.Vue === undefined) {
window.Vue = __webpack_require__(287);
window.Bus = new Vue();
}
注意:上一个问题已修复,删除了我app.blade.php顶部的额外Vuejs文件
更新1 有新的错误
[Vue警告]:模板应该只负责映射状态 到UI。避免在模板中放置带副作用的标签, 比如。
包含的模板是
wf_navigation.blade.php
<div class="row border-bottom">
<nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
<form role="search" class="navbar-form-custom" method="post" action="/">
<div class="form-group">
<input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search" />
</div>
</form>
</div>
<ul class="nav navbar-top-links navbar-right">
<?php $currentTeam = auth()->user()->currentTeam; ?>
@if($currentTeam)
<li>
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ $currentTeam->name }}
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="/settings/teams/{{$currentTeam->id}}#/owner">Profile</a>
</li>
<li>
<a href="/settings/teams/{{$currentTeam->id}}#/membership">Members</a>
</li>
<li>
<a href="/settings/teams/{{$currentTeam->id}}#/subscription">Subscription</a>
</li>
<li>
<a href="/settings/teams/{{$currentTeam->id}}#/invoices">Invoices</a>
</li>
@include('spark::nav.teams')
</ul>
</li>
@endif
</ul>
</nav>
</div>
正在调用@include(&#39; spark :: nav.teams&#39;)
teams.blade.php看起来像这样
<li class="dropdown-header">{{ ucfirst(str_plural(Spark::teamString())) }}</li>
<!-- Create Team -->
@if (Spark::createsAdditionalTeams())
<li>
<a href="/settings#/{{str_plural(Spark::teamString())}}">
<i class="fa fa-fw fa-btn fa-plus"></i>Create {{ ucfirst(Spark::teamString()) }}
</a>
</li>
@endif
<!-- Switch Current Team -->
@if (Spark::showsTeamSwitcher())
<li v-for="team in teams">
<a :href="'/{{ str_plural(Spark::teamString()) }}/'+ team.id +'/switch'">
<span v-if="user.current_team_id == team.id">
<i class="fa fa-fw fa-btn fa-check text-success"></i>@{{ team.name }}
</span>
<span v-else>
<img :src="team.photo_url" class="spark-team-photo-xs"><i class="fa fa-btn"></i>@{{ team.name }}
</span>
</a>
</li>
@endif
<li class="divider"></li>
&#39; footer.blade.php&#39;
<div class="footer">
<div class="pull-right">
V4.0
</div>
<div>
<strong>Powered By</strong> Energy Engine © 2010-2017
</div>
</div>
我是vue的新手,所以不知道那里发生了什么