Framework7 Vue, different mounted being ran

1

I’m having an issue where for some reason a mounted of a view that is NOT being showed is being ran.

Picture the following scenario:

  • I open the app and get to the homescreen
  • I go to a categories page using router.navigate (and mounted is ran)
  • I go to home once more (using router.navigate, not a back, a router.navigate)
  • From home I go to a certain product
  • From the product I go back to the homescreen (Now I am using a back-link button)
    And here instead of running the mounted of home (or no mounted at all), it’s trying to run the categories page mounted, and that’s crashing my app, since I use props on the categories page, and they’re undefined when I go back to the homescreen.

Why is the categories’ mounted function being ran if I’m not even accessing it, I believe it’s stuck somewhere in the history, but why a backbutton would trigger the mounted state of a previous page?

Thanks in advance!

2

I dont fully understand the issue. But F7 has two pages “active” current page and previous page, every other page in history will be destroyed and created again. Maybe thats the reason Categories its mounted again, it was not in memory so f7 has to render the page again to have it as previos page.

Are you using pushState?

1 Like
3

I’m using the default settings of the Vue template as far as I recall, I’m not at the office’s PC but I can check out later today.

How would pushState affect this though?

Also, is there any workaround, or should I just validate if the props are initialized before trying to use them?

4

sry not pushState, stacked pages. but never mind, as you use default Vue Template.

Some code would be useful, to understand what you are doing with the props.

but i also use vuejs and i set a default value in all my props.

props: {
  required: {
    type: Boolean,
    default: false
  },
  searchbar: {
    type: Boolean,
    required: false,
    default: false
  },
  labelFontSize: {
    type: String,
    required: false,
    default: () => '12px'
  }
  ...
}

Another solution wolud be:

<div class='page-content' v-if='my-prop/s'>

but i prefere using default values in props. this solution seems wronk to me. you force vue to render the page without sense

5

I’ll give it a try, however, is the behavior of F7 expected in this case?

Since I do not want to load dhe “previous page” mounted.

I’d like to know if I’d had to apply the default values to each page to avoid this issue or if there’s a way to prevent previous pages’ mounted from being ran.

Also, I’ll post my code later on today when I get to the office.

6

stackPages

If enabled then all previous pages in navigation chain will not be removed from DOM when you navigate deeper and deeper. It could be useful, for example, if you have some Form from 5 steps (5 pages) and when you are on last 5th page you need access to form that was on 1st page.

https://framework7.io/docs/view.html#view-parameters

7

There is a View parameters that allow to control that https://framework7.io/docs/view.html#view-parameters