vue js dans la barre de navigation bootstrap

Question

Je suis en train d'implémenter vue js dans un modèle html bootstrap... le problème que je rencontre est dans la barre de navigation....

mon code est le suivant

<router-link tag="li" to="#">
     <a><i class="fa fa-book" aria-hidden="true"></i> <span class="nav-label">Syllabus</span><span class="fa arrow"></span></a>
     <ul class="nav nav-second-level collapse">
         <router-link tag="li" to="/syllabus 1">
                <a> Syllabus</a>
         </router-link>
         <router-link tag="li" to="/syllabus/topic">
                <a>Syllabus Topic</a>
         </router-link>
      </ul>
 </router-link>

J'ai également essayé d'utiliser

<li>
         <a><i class="fa fa-book" aria-hidden="true"></i> <span class="nav-label">Syllabus</span><span class="fa arrow"></span></a>
         <ul class="nav nav-second-level collapse">
             <router-link tag="li" to="/syllabus">
                    <a> Syllabus 1</a>
             </router-link>
             <router-link tag="li" to="/syllabus/topic">
                    <a>Syllabus Topic</a>
             </router-link>
          </ul>
 </li>

Mais le problème est que lorsque je recharge la page, le menu se réduit et s'étend normalement comme il devrait fonctionner, mais lorsque je clique sur un sous-menu, par exemple "syllabus1", la page redirige vers syllabus, mais le menu se fige et ne se réduit ni ne s'étend plus... puis, de nouveau, lorsque je recharge la page, le menu commence à fonctionner correctement...

je vous prie de m'aider... merci d'avance... veuillez fournir un exemple en jsfiddle si possible... merci....

Answer 1

Modifiez d'abord le lien de votre routeur comme suit (remarquez le symbole @click.native et en utilisant router-link comme a étiquette)

<router-link to="/syllabus 1" @click.native="closeMenu($event)">

Ensuite, dans votre application principale, créez une fonction appelée collapse avec le code suivant

let app = new Vue({
   methods: {
      closeMenu($event) {
          $($event.currentTarget).closest('.navbar-collapse').collapse('hide');
      }    
   }
});

Cela devrait faire l'affaire !