Buen día, me gustaría ocultar bootstrap-5/Offcanvas cuando hago clic en el enlace interior. Aquí está 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>En los documentos oficiales dicen:
Puede crear una instancia de offcanvas con el constructor, por ejemplo: var myOffcanvas = document.getElementById('myOffcanvas') O var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
y luego use el método "ocultar". Traté de usar en el enlace del enrutador @click="hideThisCanvas" y luego
methods: { hideThisCanvas(){ let myOffcanvas = document.getElementById('offcanvasDarkNavbar') myOffcanvas.hide(); } } pero da el error myOffcanvas.hide is not a function . ¡Por favor ayuda!
tienes que crear una instancia fuera del lienzo con el constructor, por ejemplo:
methods: { hideThisCanvas(){ let myOffcanvas = document.getElementById('offcanvasDarkNavbar') let bsOffcanvas = bootstrap.Offcanvas.getInstance(myOffcanvas); bsOffcanvas.hide(); } }O
methods: { hideThisCanvas(){ let myOffcanvas = document.getElementById('offcanvasDarkNavbar') let bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas); bsOffcanvas.hide(); } }Debido a que el uso de selectores de documentos tradicionales no es ideal para el marco JS moderno, puede crear una referencia para su offCanvas como esta.
<div ref="offCanvas" class="offcanvas offcanvas-start" tabindex="-1" id="example_canvas">Luego acceda a él en su función vuejs de la manera que debería
ejemplo
let myOffcanvas = this.$refs.offCanvas;tu método final debería ser algo como esto
methods: { hideThisCanvas(){ let myOffcanvas = this.$refs.offCanvas; let bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas); bsOffcanvas.hide(); } }No sé mucho sobre vuejs, pero espero que ahora entiendas el concepto y te ayude.