Vue Single Page Application Bootstrap 5 Nav not shrinking on mobile

Question

I am building a Single Page Website using Vue 3, and I am using Bootstrap 5 for css. The navbar is one of the standard templates on the bootstrap examples page. My issue is that on mobile, when the collapsed navbar is exposed, it doesn't close. I assume this is because it's a single page application, and the nav holds it's state.

I would like the navbar to automatically collapse on the click of one of the router links. I have seen a number of answers on other StackOverflow threads that use Jquery, but I would like to use plain JS if possible. If there is a fix with bootstrap classes, that would also be great.

I have tried adding the data-bs-toggle and the data-bs-targetto the router links, but that just breaks the router links, and doesn't change anything.

Thanks in advance

Here is the html for the nav:

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#"><img class="bike" :src="bikeSVG" /></a>
      <button
        type="button"
        class="navbar-toggler"
        data-bs-toggle="collapse"
        data-bs-target="#navbarCollapse"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav me-auto mb-2 mb-md-0">
          <li class="nav-item">
            <router-link to="/" class="nav-link active">Home</router-link>
          </li>
          <li class="nav-item">
            <router-link :to="{ name: 'Events' }" class="nav-link active"
              >Events</router-link
            >
          </li>
        </ul>
        <div v-if="!this.$store.state.auth.status.loggedIn">
          <router-link
            class="nav-item mx-2 btn btn-yellow fw-bold"
            :to="{ name: 'LogIn' }"
            >Log In</router-link
          >
          <router-link
            class="mx-2 btn btn-yellow fw-bold"
            :to="{ name: 'SignUp' }"
            >Sign Up</router-link
          >
        </div>
        <div v-else>
          <div class="btn-group">
            <button
              type="button"
              class="btn btn-red dropdown-toggle"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              Profile
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
              <li>
                <router-link
                  class="dropdown-item"
                  type="button"
                  :to="{ name: 'Profile' }"
                  >Your Profile</router-link
                >
              </li>
              <hr />
              <li><a class="dropdown-item" @click="logout">Logout</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </nav>

Answer 1

The Button command argument is firing off the dealcard function as soon as you are writing it.

hit = tk.Button(root, command=lambda : dealcard(player_cards), text = 'Hit', height=4, width=20, bg='dodgerblue', highlightthickness=2, highlightbackground='black', font='times 13 bold')
    hit.pack(side=tk.RIGHT, padx=10)

Use lambda function to make a anonymous function