0

我试图将一些功能移动到我的 app.blade.php 中，即 NavBar 的 Laravel Spark 的下拉。

我的代码看起来像这样

<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('spark::nav.teams')

team.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>

'footer.blade.php'

<div class="footer"> <div class="pull-right"> V4.0 </div> <div> <strong>Powered By</strong> Energy Engine &copy; 2010-2017 </div> </div>

我是 vue 新手，所以不知道那里发生了什么

4

0 回答 0