Tabbed Views + Change Tab & View

Questions
1

How can I automatically change/update the tab clicking in a button that is outside from toolbar/tabbar?

To reproduce:

  1. Create a new application using Framework7 CLI:
$ mkdir dummy
$ cd dummy/

$ framework7 create
  1. Select framework as Framework7 with Vue.js.
  2. Select starter template as Tabbed Views (Tabs).

Go to the pages/home.vue and add this (after “About” link):

<f7-list-item link="/about/" title="About on catalog view" view="#view-catalog"></f7-list-item>

Try click in this link “About on catalog view” and you’ll see nothing happens. But if you click on “Catalog” tab you will see that the about page was loaded in that view.

How can I automatically change/update the tab?

2

https://framework7.io/vue/tabs.html#tabs-methods

3

I see that, but I need to explicitly change the tab every time? There is no automatic way just putting a prop on f7-link?

4

You need also to switch the tab together with routing, it is done with tab-link prop, e.g. tab-link="#view-catalog"

5

@nolimits4web, I tried it but with no effect.

<f7-list-item link="/about/" title="About on catalog" view="#view-catalog" tab-link="#view-catalog"></f7-list-item>
6

@nolimits4web after a long period of research I noticed that the tab changes but the “tab-link-highlight” doesn’t, giving the impression that there was no change.

Any ideas on how to fix this?

7

i fix.

  1. name page in href
  2. data-view = name of views
  3. data-tab = id tabs views
  4. class must have “tab-link”

\a href="/test/" data-view=".view-test" data-tab="#view-2" class=“item-content item-link tab-link”\