Frameowrk7 and Vue - Running functions on tabbed views show

I’m new to both Framework7 and Vue - and I’ve started my first application around the Framwork7/Vue default setup application.

I’m trying to get my head around the tabbed menu which is located in the app.vue

All the views within this menu, are run (ie, mounted) on the app launching - my issue is that the majority of these views require the user to be logged in to load personalised data - so originally, I was including an ajax function on the mounted function - but obviously, this is getting loaded on app launch when the user isn’t logged in and no data is returned. And it’s not rerun when the user clicks the tabs.

Within the Framework7/Vue environment, what’s the best way to fun a function when a view is shown/opened.

Currently, my solution has been to remove the mounted functions out of all the tabbed views, and include them in the Vue.mixin({ on app setup. This means I can access them when the tab is clicked.

<f7-view id="view-profile" name="profile" tab url="/profile/" @tab:show="this.getProfile"></f7-view>

This is works - but obviously, I would potentially ideally like to keep everything within the profile.vue, so that if I were to link to a page from anywhere else, that it simply just runs. Is there an event/function that I can include within the profile.vue export default { which will fire everytime the page is accessed through the view?

It could be that I’m not understanding something about this combined environment of Framework7/Vue as I’m new to both.

For the visibity of menu items for logged in users, I normally set additional classes on the body. For example .no-login / .login on the body and .login-only and .nologin-only And then show/hide menu items from CSS:

.nologin-only,
.login-only {
  display: none;
}

body.no-login .nologin-only,
body.login .login-only {
  display: block;
}

Thanks for the reply - I think I’ve confused the issue with the logging in - I want to be able to check for new data on the server each time the tabbed view is shown.

Obviously, with Vue the mounted function fires when the page is opened from a link, but when the parent of a view it only fires the once.

Is the best way to do this to add a listener on tab:show? using Dom7? to lookout for when that view is accessed?

Yes, issue here that tab:show happens on parent View component, so if you need and want to keep this logic in child component, then you can attach to this event using, yes, Dom7 within your mounted hook of child component:

//profile.vue
...

mounted() {
  this.$$(this.$el).parents('.view').on('tab:show', this.onTabShow);
},
methods: {
  ...
  onTabShow() {
    // do something here when parent View becomes visible
  }
}
1 Like