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
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
1 Like
I tried v-bind before but getting error unexpected code
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 }")
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.
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:
1 Like
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 }"