How can I make a bootstrap offcanvas disappear in Vue 3 after clicking a router-link?

Question

How can I make a bootstrap offcanvas disappear in Vue 3 after clicking a router-link?

Hey there! I'm looking to close the bootstrap-5 Offcanvas when I click on a link inside it. Here's the code for the Offcanvas:

  //Button activate Offcanvas
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar"
          aria-controls="offcanvasDarkNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  //Offcanvas
  <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar"
       aria-labelledby="offcanvasDarkNavbarLabel">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Menu</h5>
    </div>
    <div class="offcanvas-body">
      <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
        <li class="nav-item">
          <router-link to="/about" class="nav-link link-info align-middle px-0">
            <i class="fs-4 bi-house"></i> <span class="ms-1 d-none d-sm-inline">Home</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>

The official docs mention:

You can create an offcanvas instance with the constructor, for example: var myOffcanvas = document.getElementById('myOffcanvas') OR var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

and then utilize the "hide" method. I attempted to use @click="hideThisCanvas" in the router-link and then

methods: {
  hideThisCanvas(){
    let myOffcanvas = document.getElementById('offcanvasDarkNavbar')
    myOffcanvas.hide();
  }
}

but it's throwing the error

myOffcanvas.hide is not a function

. Any assistance would be greatly appreciated!

javascript vuejs3 hide bootstrap-5

Answer 1

Answer №1

To utilize an offcanvas instance, you need to instantiate it with the constructor. Here's an example:

methods: {
  hideThisCanvas(){
    let myOffcanvas = document.getElementById('offcanvasDarkNavbar')
    let bsOffcanvas = bootstrap.Offcanvas.getInstance(myOffcanvas);
    bsOffcanvas.hide();
  }
}

OR

methods: {
      hideThisCanvas(){
        let myOffcanvas = document.getElementById('offcanvasDarkNavbar')
        let bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
        bsOffcanvas.hide();
      }
    }

Instead of using traditional document selectors, it is recommended to create a reference for your offCanvas like this.

<div ref="offCanvas" class="offcanvas offcanvas-start" tabindex="-1" id="example_canvas">

Then, you can access it within your vuejs function as follows

example

let myOffcanvas = this.$refs.offCanvas;

Your final method should look something like this

methods: {
      hideThisCanvas(){
        let myOffcanvas = this.$refs.offCanvas;
        let bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
        bsOffcanvas.hide();
      }
    }

I don't have extensive knowledge of vuejs, but I hope this explanation clarifies the concept for you and proves helpful.

Answer 2

To utilize an offcanvas instance, you need to instantiate it with the constructor. Here's an example:

methods: {
  hideThisCanvas(){
    let myOffcanvas = document.getElementById('offcanvasDarkNavbar')
    let bsOffcanvas = bootstrap.Offcanvas.getInstance(myOffcanvas);
    bsOffcanvas.hide();
  }
}

OR

methods: {
      hideThisCanvas(){
        let myOffcanvas = document.getElementById('offcanvasDarkNavbar')
        let bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
        bsOffcanvas.hide();
      }
    }

Instead of using traditional document selectors, it is recommended to create a reference for your offCanvas like this.

<div ref="offCanvas" class="offcanvas offcanvas-start" tabindex="-1" id="example_canvas">

Then, you can access it within your vuejs function as follows

example

let myOffcanvas = this.$refs.offCanvas;

Your final method should look something like this

methods: {
      hideThisCanvas(){
        let myOffcanvas = this.$refs.offCanvas;
        let bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
        bsOffcanvas.hide();
      }
    }

I don't have extensive knowledge of vuejs, but I hope this explanation clarifies the concept for you and proves helpful.

Answer 3

Answer №2

"Clicking" toggler works as well. Implement a function that your router-links triggers when clicked:

function closeOffcanvas() {
   document.getElementById('offcanvasToggler').click()
}

The toggler must be assigned an id:

<button id="offcanvasToggler" class="navbar-toggler" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas">

The router simply triggers the function to simulate a click:

<router-link :to="{ name: 'home'}" class="nav-link" @click.prevent="closeOffcanvas()">

There may be a more elegant Vue-like code utilizing ref as mentioned earlier. However, this method serves its purpose for me. You can also refer to the close button if you have it, using

data-bs-dismiss="offcanvas"

Answer 4

"Clicking" toggler works as well. Implement a function that your router-links triggers when clicked:

function closeOffcanvas() {
   document.getElementById('offcanvasToggler').click()
}

The toggler must be assigned an id:

<button id="offcanvasToggler" class="navbar-toggler" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas">

The router simply triggers the function to simulate a click:

<router-link :to="{ name: 'home'}" class="nav-link" @click.prevent="closeOffcanvas()">

There may be a more elegant Vue-like code utilizing ref as mentioned earlier. However, this method serves its purpose for me. You can also refer to the close button if you have it, using

data-bs-dismiss="offcanvas"

How can I make a bootstrap offcanvas disappear in Vue 3 after clicking a router-link?

Answer №1

Answer №2

Similar questions

Using asynchronous file uploading with jQuery and ASP.NET for a seamless user experience

What is the best way to delete rows from an HTML table?

Interactive tables created using Google Visualization

Sharing methods between two components on the same page in Angular can greatly improve code efficiency

What is the reason that selection disappears when right-clicking on highlighted text to bring up the context menu?

Notification for radio button selected

Angular: Disabling a button based on an empty datepicker selection

What are some ways to make session variables available for sub applications?

Ways to retrieve Data obtained in response using superagent

Having difficulty with the useState hook in a material ui functional component that integrates with Firebase

Encountered an unexpected error in Vue: "Maximum call stack size exceeded callWithAsyncErrorHandling - Uncaught Range

Retrieving and securely storing information using fetch() on authenticated REST services

How come my variable doesn't show up in the view even though I filled it in the controller?

Click on the navigation bar buttons to toggle between different divs and display multiple information boxes simultaneously

Increase the value of (N) in the copied MongoDB file name

What happens if I don't associate a function or method in the React class component?

Bootstrap-tour is incompatible with a row within a table structure

Error: Attempting to access a property of an undefined value, please verify the key name is

Upon loading, make sure to click on the link located within the third <li> tag

What is the best way to create a clickable background for a modal window?