Question

我是Laravel和Vue的新手，我目前正在构建一个应用程序，并尝试合并Vue来处理我的侧边栏导航项。

目前我的侧边栏正在从我的视图模板中按预期填充。一切都很好，当我第一次启动我的应用程序时，选择并突出显示导航项目0。但是，当我点击任何其他导航项时，我可以看到active类被简要添加到该项目，但随后新的Url加载，我的vue模板重新加载，导致导航项0再次激活。 / p>

我原本以为只有我的@yeild( 'content' )应该重新加载，而我主刀片模板中的任何内容都应保持不变。

这让我觉得我忽略了某些事情或者出了什么问题。

主刀片模板：

<body>

    <div class="main-wrapper">

        <!-- Header -->
        @include( 'layouts.header' )

        <!-- Sidebar -->
        @include( 'layouts.sidebar' )

        <!-- Content Wrapper. Contains page content -->
        <div @auth class="content-wrapper" @else class="content-wrapper-no_sidebar" @endauth>

            <div class="container-fluid">

                <!-- Main content -->
                <section class="content">

                    @yield('content')

                </section><!-- /.content -->

            </div>

        </div><!-- /.content-wrapper -->

    </div>
    ...

</body>

layouts.sidebar：

<div id="side_bar">

    @auth

        <aside class="left-sidebar">

            <nav>

                <side-bar></side-bar>

            </nav>

        </aside>

    @endauth

</div>

SideMenu.vue（侧边栏模板文件）：

<template>

        <div class="sidebar-menu">

            <a v-for="( item, index ) in items" class="side-nav-item" :class="{ active: item.active }" :href="item.Url" @click="toggleItem( index )">
                <i :class="item.Icon"></i><br>
                {{ item.Description }}
            </a>

        </div>

</template>

<script>
    export default {

        data() {
            return {
                items: [
                    {
                        active: false,
                        Description: 'Dashboard',
                        Icon: 'fas fa-tachometer-alt',
                        Url: '/home'
                    },
                    {
                        active: false,
                        Description: 'Test Cases',
                        Icon: 'fas fa-calendar-check',
                        Url: '/testcases'
                    },
                    {
                        active: false,
                        Description: 'Applications',
                        Icon: 'fab fa-windows',
                        Url: '/applications'
                    },
                    {
                        active: false,
                        Description: 'Testers',
                        Icon: 'fas fa-users',
                        Url: '/testers'
                    },
                    {
                        active: false,
                        Description: 'Modules',
                        Icon: 'fas fa-sitemap',
                        Url: '/categories'
                    }
                ],
                currentActiveIndex: 0,
            }
        },

        methods: {
            toggleItem( index ) {



                this.items[this.currentActiveIndex].active = false;
                this.items[index].active = true;
                this.currentActiveIndex = index;



            }


        },

        mounted() {



            this.items[this.currentActiveIndex].active = true;
            console.log( 'Sidebar Loaded' );



        }

    }
</script>

app.js：

Vue.component( 'side-bar', require( './components/SideMenu.vue' ) );


// Define new vue instances
const side_bar = new Vue({



    el: '#side_bar'



});

如何在加载Laravel视图时阻止重新加载Vue模板

0 个答案: