skip to Main Content

The navbar theme change is not working.

When I click on the dark mode button it changes theme for 1 second and goes back to light.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <nav :class="[`navbar-${theme}`, `bg-${theme}`, 'navbar', 'navbar-expand-lg']">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Navbar</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="changeTheme()">dark mode</button>
            </form>
          </div>
        </div>
      </nav>
      <div id="content" class="container">
        <h1>{{ pages[activePage].pageTitle }}</h1>
        <p>{{ pages[activePage].content }}</p>
      </div>
      <script>
        Vue.createApp({
            data(){
                return { 
                    activePage: 0,
                    theme: 'light',
                    pages:[
                        {
                            link: {text: "Home", url: "index.html"},
                            pageTitle: "Home Page",
                            content: "This is the home content"
                        },
                        {
                            link: {text: "About", url: "about.html"},
                            pageTitle: "About Page",
                            content: "This is the about content"
                        },
                        {
                            link: {text: "Contact", url: "contact.html"},
                            pageTitle: "Contact Page",
                            content: "This is the contact content"
                        },
                    ]
                }
            },
          methods: {
            changeTheme() {
              let theme = 'light';

              if(this.theme == 'light') {
                theme = 'dark';
              }

              this.theme = theme;
            }
          },
        }).mount("body")
      </script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
  </body>
</html>

I tried to find what was wrong but I couldn’t.

I wanted the button to change themes when I pressed the "dark mode" button

But the result that he switches themes for 1 second and goes back to normal

2

Answers


  1. 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>
    
    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search