Vue.js en MDBootstrap

Gepubliceerd op 12 januari 2022Leestijd: 4 minuten

Vue.JS is een javascript-framework waarmee je relatief eenvoudig herbruikbare componenten voor je webapplicatie kunt maken in HTML, Javascript en CSS. Je kan dit volledig server-site gebruiken, je kan de componenten server-side genereren en client-side gebruikmaken van VUE.js of je kan het volledig client-side gebruiken.

Voor visuele styling zijn er andere frameworks, zoals bijvoorbeeld MDBootstrap. MDBootstrap staat voor material design bootstrap. Material Design wordt omgeschreven als: “”. Met MDBootstrap (MDB) pas je middels een aantal HTML-elementen en CSS-klassen snel een gebruiksvriendelijke interface toe.

Deze twee frameworks zijn ideaal om te combineren: eenvoudig herbruikbare componenten en een gebruiksvriendelijke kant-en-klare interface.

Waar moet je op letten?

Zodra MDB is ingeladen, zoekt het framework naar elementen die speciale functionaliteiten moeten bevatten. Elementen in een zijbalk, Sidenav, zijn bijvoorbeeld uitklapbaar. Wanneer een element wordt toegevoegd binnen die zijbalk door Vue.js, nadat MDB al is ingeladen, dan wordt de opmaak wel toegepast, maar de functionaliteit niet.
Dit geldt voor het aanpassen van bestaande elementen. Het toevoegen van nieuwe elementen wordt gedetecteerd en MDB zal ervoor zorgen dat die elementen interactief zijn. Voor bestaande elementen geldt dit dus echter niet. Zie als voorbeeld onderstaande:

  <!-- Sidenav -->
    <nav
      id="sidenav-1"
      class="sidenav"
      data-mdb-hidden="false"
    >
      <ul class="sidenav-menu">
        <li class="sidenav-item" v-for="item in menuItems">
          <a class="sidenav-link"
            ><i class="fas fa-grin fa-fw me-3"></i><span>{{item.Name}}</span></a
          >
          <ul class="sidenav-collapse show">
            <li class="sidenav-item" v-for="childItem in item.Items">
              <a class="sidenav-link">{{childItem.Name}}</a>
            </li>
          </ul>
        </li>
      </ul>

      <button @click="addItem">Toevoegen</button>
    </nav>
    <!-- Sidenav -->

Het SideNav-component wordt gevuld met menuitems uit een Vue.js-applicatie:

 const app = createApp({
      data() {
        return {
          'menuItems': [{'Name': 'Category 1', 'Items' : [{'Name':'Link 1'}, {'Name':'Link 2'}]}]
        }
      }
      ,methods:{
        addItem: function(){
            var index = this.menuItems.length + 1;
            var category = {'Name': 'Category ' + index, 'Items' : [{'Name':'Link 1'}, {'Name':'Link 2'}]};
            this.menuItems.push(category);
        }
      }
    });
   app.mount('#webpage');

Het Sidenav-component (https://mdbootstrap.com/docs/standard/navigation/sidenav/) kan menu-items in- en uitklappen. Dit werkt niet als het component wordt gevuld met items via Vue.js.
Sterker nog, als je het MDB-initialisatiescript uitvoert (mdb.min.js) ná het mounten van de applicatie, dan worden alle menu’s uitgeklapt bij het klikken op een menuitem, omdat de elementen door Vue.js worden gekopieerd.

Hoe los je dit op?

Door de sideNav te initialiseren ná mounten en ná het updaten van de items:

  const app = createApp({
      data() {
        return {
          'menuItems': [{'Name': 'Category 1', 'Items' : [{'Name':'Link 1'}, {'Name':'Link 2'}]}]
        }
      }
      ,methods:{
        addItem: function(){
            var index = this.menuItems.length + 1;
            var category = {'Name': 'Category ' + index, 'Items' : [{'Name':'Link 1'}, {'Name':'Link 2'}]};
            this.menuItems.push(category);
        }
      }
      ,updated(){
       const sidenav = document.getElementById('sidenav-1');
       var instance =  mdb.Sidenav.getInstance(sidenav);
       instance.update();
      }      
      ,mounted(){
       const sidenav = document.getElementById('sidenav-1');
       const sidenavInstance = new mdb.Sidenav(sidenav);
      }
    });

Dit geldt voor alle elementen die via Vue.js worden aangepast.