Vue Tabbar Scrollable Errors

Questions
1

When using the “scrollable” property in Vue Tabbar I’m getting errors saying “offsetWidth” is undefined.

<f7-toolbar tabbar scrollable bottom-md labels> </f7-toolbar>

What goes between the toolbar element doesn’t seem to matter. I can strip it bare and it still does the same thing.

Here’s a screenshot of my console

F7 Errors Scollable Tabbar
F7 Errors Scollable Tabbar.png699×634 25.3 KB

2

Issue is somewhere else, it works perfectly in default Kitchen Sink at https://github.com/framework7io/framework7-vue/blob/master/kitchen-sink/src/pages/tabbar-scrollable.vue

3

I think I got it!

If you use tabbar scrollable with a v-for you must write it like

v-for = (something, index) in someArray

AND add the property.

:tab-link-active="index === 0"

Without that property it will fart out with offsetWidth of undefined and a bunch of Vue.warn errors.

To understand why it has to be done this way, see the following bit of code:

f7.esm.bundle.js

line 6632-ish

if ($tabbarEl.hasClass('tabbar-scrollable')) {
      highlightWidth = `${$activeLink[0].offsetWidth}px`;

May I suggest updating the F7 Vue docs to relate this little bit of information?

@nolimits4web looking at the code to figure this out, I realized that you did A LOT, A LOT, A LOT of work to put this thing together. Well done sir!