[Vuejs]-Navbar theme switching not working as expected

by

0👍

✅

The problem is the default button behavior is submit, so you can use v-on:click.prevent="changeTheme()" to prevent the default behavior or add type="button"

    <nav :class="[`navbar-${theme}`, `bg-${theme}`, 'navbar', 'navbar-expand-lg']">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar {{theme}}</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li v-for="(page, index) in pages" class="nav-item" :key="index">
                        <a class="nav-link" :class="{active: activePage == index}" :href="page.link.url" v-on:click.prevent="activePage = index">{{ page.link.text }}</a>
                    </li>
                </ul>
                <form action="" class="d-flex">
                    <button class="btn btn-primary" v-on:click.prevent="changeTheme()">dark mode</button>
                </form>
            </div>
        </div>
    </nav>

Demo

0👍

Since the button does not have a type attribute and is inside a form, it triggers a reload of the page when you click it, reloading the page with light theme.

Add a type="button" attribute to fix the issue:

<button type="button" class="btn btn-primary" @click="changeTheme()">dark mode</button>

Leave a comment