vue js in bootstrap navbar

manpreet Best Answer 2 years ago

i am implementing vue js in bootstrap html template... problem i am facing is in navbar..

my code is

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

i have also tried using

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

but the problem is when i am reloading the page the menu collapse and expands normally as it should work but when i am clicking on a a sub menu for instance "syllabus1" the page redirects to syllabus but the menu freezes and does not any longer collapse or expands...then again on reloading the menu starts working fine

please help me with this... thanks in advance... please provide an example in jsfiddle if possible... thankx..

manpreet 2 years ago

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

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