Vue v-if affects formatting of navbar

Questions
1

Using Vue js with F7

I added a v-if to a <f7-navbar> element and it changed the formatting.

Am I doing something wrong?

this is the display with the v-if. Without it the title is centered.
SHF7-v-if

<f7-navbar>
      <f7-nav-left>
        <f7-link
          v-if="isAuthenticated"
          icon-if-ios="f7:menu"
          icon-if-md="material:menu"
          panel-open="left"
          text="Menu"></f7-link>
      </f7-nav-left>
      <f7-nav-title>Share House A9</f7-nav-title>
      <f7-nav-right>
        <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="right" text="Admin"></f7-link>
      </f7-nav-right>
    </f7-navbar>
2

Weird thing I just noticed: if I close devtools and then re-open them, everything centers up. But only until I reload the app.

Another possibly relevant fact that I omitted was that Iā€™m using the F7 Webpack blank template app with Vuex and Axios added.

3

Make sure you are on latest version and try v-if on f7-nav-left

1 Like
4

Thanks!

Updating to 2.0.10 seems to have taken care of it.