How can I change active tab from the code?


Hi, I want to change active when the page mounted, I have tried v-if but did not worked, I think because of f7 does not use v-bind as docs says, can anybody help me on this ?

html code for the tabs is below, tab-link-active makes a tab active, means selected

        span.tabbar-label CHAT'#tab-2')
        span.tabbar-label VOICE'#tab-3')
        span.tabbar-label VIDEO'#tab-4')
        span.tabbar-label PEOPLE


If you use Vue, then you can just use Vue’s methods for this by v-bind to tab-link-active and tab-active classes based on required condition. Otherwise, you can use Tabs API


I tried v-bind before but getting error unexpected code

  • invalid expression: Unexpected token : in

    tab-link-active: getActiveTab

Raw expression: :class=“tab-link-active: getActiveTab”

here is my code'#tab-2', v-bind:class="{ tab-link-active: getActiveTab }")

or this way

a(href='#tab-2', v-bind:class="tab-link.b" { tab-link-active: getActiveTab }")


anyway I solved it with’#tab-2’, :class=“getActiveTabAudio”)

I dont know why other way gaves error, both with computed and data value, I think f7 vue does not allow v-bind but I am not sure for “a” tag.


You are wrong your problem has nothing to do with framework7, its supports v-bind.
v-bind in vue its the same as --> :. so : its a shorthand of vue to v-bind.
Here you can read about vuejs Shorthands

Your probleim is in your code. as you are using kebab-case you should wrap the class in quotes. As the Vuejs docs says, Object-Syntax

The object syntax for v-bind:style is pretty straightforward - it looks almost like CSS, except it’s a JavaScript object. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names:


Isnt thıs double quotes as described in object docs

:class="{ tab-link-active: getActiveTab }"


@pvtallulah is correct, there is just a syntax error in your code, it should be

:class="{ 'tab-link-active': getActiveTab }"