Dynamically create tabbar in page of navigator

Symorp

Hello,
i am trying to generate tabbar on page, based on some data from API.

So I created this:

    let data = [];
    let onsEle = document.createElement('ons-tab');
    onsEle.setAttribute('id', 'rdMainTab');
    onsEle.setAttribute('page', 'rdMain.html');
    onsEle.setAttribute('label', 'Main');
    onsEle.setAttribute('icon', 'ion-home, material:md-home');
    onsEle.setAttribute('active', '');

    data.push(onsEle);

    if (showData1) {
      let onsMapEle = document.createElement('ons-tab');
      onsMapEle.setAttribute('id', 'rdMapTab');
      onsMapEle.setAttribute('page', 'rdDetailMap.html');
      onsMapEle.setAttribute('label', 'Map');
      onsMapEle.setAttribute('icon', 'ion-home, material:md-home');
      data.push(onsMapEle);
    }

    if (showData2) {
      let onsInvEle = document.createElement('ons-tab');
      onsInvEle.setAttribute('id', 'rdInvoiceTab');
      onsInvEle.setAttribute('page', 'rdInvoiceTab.html');
      onsInvEle.setAttribute('label', 'Invoice');
      onsInvEle.setAttribute('icon', 'ion-home, material:md-home');
      data.push(onsInvEle);
    }

    if (showData3) {
      let onsTriEle = document.createElement('ons-tab');
      onsTriEle.setAttribute('id', 'rdTripsTab');
      onsTriEle.setAttribute('page', 'rdTripsTab.html');
      onsTriEle.setAttribute('label', 'Trips');
      onsTriEle.setAttribute('icon', 'ion-home, material:md-home');
      data.push(onsTriEle);
    }

    let wrap = document.createElement('ons-tabbar');
    wrap.setAttribute('swipeable', '');
    wrap.setAttribute('position', 'auto');
    wrap.setAttribute('id', 'reservation-detail-tabbar');
    wrap.setAttribute('class', 'x-margin-top');

    let l = data.length;
    for (let a = 0; a < l; a++) {
      wrap.appendChild(data[a]);
    }

    $page.find('#tabbarPlaceholder')[0].appendChild(wrap);

The tabbar renders ok. But, when I click at another tab it is showing this error:

Uncaught (in promise) TypeError: page._show is not a function
    at HTMLElement._onPostChange (index.js:264)
    at swiper.js:343

And when I try to go back it is showing this:

index.js:281 Uncaught (in promise) TypeError: prevTab.pageElement._hide is not a function
    at HTMLElement._onPreChange (index.js:281)
    at Swiper._changeTo (swiper.js:335)
    at Swiper.setActiveIndex (swiper.js:183)
    at index.js:459

Can you please tell me how to generate tabbar dynamicaly? Or where I made mistake? Many thanks and have a nice day.

emccorson

Can you please reproduce the problem in the playground? https://onsen.io/playground/

Symorp

Hello,
so this is something that may be result https://codepen.io/symorp/pen/bGbWEeW but I wanna pages in tab bar create dynamically by some conditions. Currently, I am using jQuery but in the future, we wanna migrate to Vue so is here a way how to render tabs in tab bar with jQuery or Vue?

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Dynamically create tabbar in page of navigator