How to reference (dynamically created) main view?

Hi,

In my app methods I have the following to go to login when you’re not logged in yet or to a trips index page when you’re already logged in (or maybe later on the last view you visited):

methods: {
    onF7Ready(f7) {

        if (this.$auth.isAuthenticated()) {
       
            f7.views.create('.view-main', { url: '/trips/' })

        } else {
            f7.views.create('.view-main', { url: '/login/' })
        }
    }
},

I am also using the left-panel.vue (from the example app) with:

<f7-list-item link="/trips/" title="Routes" view="#main-view" panel-close></f7-list-item>

In my App.vue I have the main view like

<f7-view class="view-main" id="main-view" url="/" main></f7-view>

I had to change view="#main-view" in the panel-left to view=".main-view". This is probably a result of how I did create the view in the onF7Ready of the app. I tried to change that to f7.views.create('#view-main', { url: '/trips/' }) but that did not work. Is it possible to change the f7.views.create so that I can reference the view with ‘#view-main’ (for consistency, and it may be better to reference sth unique by id)?

You should do it in Vue-way, in declarative way, and don’t create Views with API, e.g.:

<div id="#app">
  <f7-view main v-if="$auth.isAuthenticated()" url="/"></f7-view>
  <f7-login-screen v-if="!$auth.isAuthenticated()">
    ...
  </f7-login-screen>
</div>
2 Likes