Vue - Tabs - Component loaded in last tab doesn't always work

Questions
1

Using Vue, I have components loading inside of tabs. I am getting intermittent failure of any component loaded in the last tab of the page when tabs > 2. Even if I load the same component in each tab, the last one will simply stop working.

By ‘stop working’ I mean for example, if I have a check box that sets a bool, the check box will show/hide the checkmark, but will not change the bool. Buttons will not fire their assigned functions. I checked to make sure the events were firing and they were.

There is no failure in the other tabs. And even the last one sometimes works, for a little while.

I have tried it with two, three, and four tabs. If there are more than two, the last one has this problem. It doesn’t even matter what component I load in it. If i switch to another component, the same thing happens.

In addition, if I change the data any of the other tabs, they all update, except the last one.

What am I doing wrong?

<f7-toolbar tabbar bottom-md labels>
  <f7-link tab-link="#tab1" text="Tab1"></f7-link>
  <f7-link tab-link="#tab2" text="Tab2"></f7-link>
  <f7-link tab-link="#tab3" text="Tab3"></f7-link>
  <f7-link tab-link="#tab4" text="Tab4"></f7-link>
</f7-toolbar>

<f7-tabs swipeable data-loop="true">
  <f7-tab id="tab1" tab-active>
    <supplies-modify></supplies-modify>
  </f7-tab>

  <f7-tab id="tab2" tab>
    <supplies-modify></supplies-modify>
  </f7-tab>

  <f7-tab id="tab3">
    <supplies-modify></supplies-modify>
  </f7-tab>

  <f7-tab id="tab4">
    <supplies-modify></supplies-modify>
  </f7-tab>

</f7-tabs>
1 Like
2

Problem is in data-loop true, Swiper will duplicate DOM slides, so it won’t work correctly with vue components

1 Like
3

I added an extra tab with no vue component inside. Now all my components work.

Admittedly, it’s a hack work around. But I can put HTML in there and display something.

Right now it says “This page intentionally left blank” :wink: