How can I change active tab from the code?


#1

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

  .toolbar.tabbar-labels
    .toolbar-inner
      a.tab-link.b.tab-link-active(href='#tab-1')
        span.tabbar-label CHAT
      a.tab-link.b(href='#tab-2')
        span.tabbar-label VOICE
      a.tab-link.b(href='#tab-3')
        span.tabbar-label VIDEO
      a.tab-link.b(href='#tab-4')
        span.tabbar-label PEOPLE

#2

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 http://framework7.io/docs/tabs.html#tabs-app-methods


#3

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

a.tab-link.b(href='#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 }")

#4

anyway I solved it with a.tab-link.b(href=’#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.


#5

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:


#6

Isnt thıs double quotes as described in object docs

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


#7

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

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