Dynamic Tabbar Vue

[AndreaGiulianini]

Good day, i want after a ajax call create tab in my app, the base of project is Kitchensink, i not understand how, with example v-on-tabbar it’s look impossible, it possible or not? if is it possible how? I not know previously number of tab, name, data.
Thanks to all those who answer.

[emccorson]

v-ons-tabbar has the tabs prop which defines the tabs it displays. If you bind to tabs then whenever you change the contents of your array of tabs, v-ons-tabbar will update. So after you have made your AJAX call, you can push a new element to the tabs array.

For example, if you have this somewhere in your HTML:

<v-ons-tabbar :tabs="tabs"></v-ons-tabbar>

Then you can have something like this:

new Vue({
  data() {
    return {
      tabs: []
    };
  },
  methods: {
    addPage: function() {
      this.tabs.push(
           // define some page you want to push in here
      );
    }
  }
});

You can then call addPage after you have done the AJAX call.

[AndreaGiulianini]

Thanks, but i not understand, inside push function, i insert only the prop of all page, where i define the html for all tab page?

[emccorson]

Sorry, I’m having trouble understanding what you’re asking. Do you mean where should you define the HTML for the pages? The HTML should be defined inside a template:

<template id="myPage">
// define page HMTL here
</template>

And then you can have:

tabs: [
  {
    page: { template: '#myPage' }
  }
]

There is a full example here: https://onsen.io/v2/api/vue/v-ons-tabbar.html#tutorial

If you are still having problems, please post an example using https://onsen.io/playground and then click ‘Export to Codepen’.

[AndreaGiulianini]

Thanks, but my situation it’s different, after ajax call i want create pages for all data, but i can’t create template with dynamic way, i know number of page and data only after call, how i can create now? For example with v-for i receive more error on template. I don’t know anything a priori

Little example - Categories and Products are filled after ajax, same tabs
https://codepen.io/andreagiulianini/pen/zyRVQN

Sorry for english and thanks.

[emccorson]

Thanks for your response. I think I see what you’re trying to do now.

page.template does not need to be an ID - it can also be a full HTML definition e.g.

template: '<v-ons-page> // some data in here </v-ons-page>'

So you can define the page inline like that inside the method that does the AJAX call.

But that could quickly get messy so you might prefer to create a template that takes the data from the AJAX call as props e.g.

<template id="myPage">
  <v-ons-page>
    The data from the AJAX call is: {{ ajaxData }}
  </v-ons-page>
</template>

const returnedData = // do AJAX call or whatever here
this.tabs.push(
  {
    page: { template: '#myPage', props: ['ajaxData'] },
    props: { ajaxData: returnedData }
  }
);

That way you can make as many different pages as you want based off myPage.

[AndreaGiulianini]

Thanks for reply.
That is my situation now https://codepen.io/andreagiulianini/pen/EGrPKQ
I have white screen, no error in console, where i research problem? Thanks for all.

[emccorson]

You haven’t copied the push code properly from my previous reply.

If you have a page defaultPage that accepts a prop called propName and a variable that holds the value you want to pass to propName then it’s this:

this.tabs.push(
  {
    page: { template: '#defaultPage', props: ['propName'] },
    props: { propName: propValue  }
  }
);

page.props defines the names of the props.
props defines the values you pass to those props.

[AndreaGiulianini]

Thanks, i tried but the problem is the same, blank page without error.

[emccorson]

I don’t know about your app, but the codepen you posted won’t work because it’s only a part of the application i.e. the HTML contains two templates but it doesn’t have anything that would actually load either of those templates, like a Vue instance with el defined and div to put it in. See the tabbar example on the playground to see what I mean https://onsen.io/playground/?framework=vue&category=reference&module=tabbar

If you post a working example (one that shows your app actually loading on the screen) then I can help. I’d recommend starting from the working tabbar example I linked above, and then changing it like I suggested to load the tabs dynamically. Also you should first try making the example without AJAX (just use dummy data) to show that it does work and then add AJAX later.

[michaeltorr]

Thanks, its help me!