Navigator erase stack possible ?

[Saloniq David]

I’m using Onsen with Vue. When I try pageStack = [] followed by pageStack.push(somePage) this will result correctly in somePage being in pageStack. But the backButton is still being shown for some reason even if there’s no page to return to. How to deal with this ?

[munsterlander]

@Saloniq-David Well for vanilla there is resetToPage(page, [options]) when I look at the docs for Vue, I don’t see that nor did I see the push property, so I guess they are not documented. You may try the vanilla version and see what happens.

[Saloniq David]

Thank you. Vanilla resetToPage doesn’t mix well with Vue, when supplied with the template, error comes up in the console. Considering the overwhelming circumstances and in the absence of a proper systemic solution I decided to do the unthinkable, in postPush event I simply set the back button to display:hidden. This only works if wrapped in setTimeout(fn,0) which makes me think that straight after calling postPush, Onsen sets the style of back button itself. At any rate, this needs looking at, really surprised there isn’t anything inbuilt for this - I would think - pretty common use case.

[Fran Diox]

There is indeed a mechanism to hide the back button. Also, in Vue you can ensure it in a very easy way: <v-ons-back-button v-show="pageStack.length > 1">.
Try to do the reset at once: pageStack = [somePage] and see if there is any difference.

[Saloniq David]

Thank you Fran. I’m aware of the v-show directive. The problem as I see it is that at this stage anything below v-ons-navigator doesn’t seem to be reactive.
Pages get pushed into navigator’s pageStack and that part works fine. Altering pageStack through console yields the desired changes.
However if I try something like v-show=“showMe” and then alter showMe through console this does not change the DOM at all.

Are there maybe some caveats I need to be aware of when rendering multiple nested templates ?

Oh and I tried to both empty the pageStack before pushing new page and assigning a 1-page array and back button stays on at all times.

[Fran Diox]

@Saloniq-David I’m not aware of any caveat like that. v-ons-navigator is simply using Vue’s v-for to render all the components so it shouldn’t break reactivity. I just tried saving a page’s instance globally and changing its data in the dev console and it works as expected. Perhaps you have some other issue or are doing it in a different way…

About the back button, I checked the code and think that there might be a bug in Vue bindings when performing a reset or replace regarding the back button. I’ll try to fix it for the next release :+1:

Update: Are you resetting the stack when you only have 1 element (with push animation)? I mean, something like this [oldPage] => [newPage]. This is considered as a page replacement and I just fixed the back button bug for this. I couldn’t find issues in other situations.

[Saloniq David]

Thanks again Fran. I pinpointed the problem to props not being passed down. pageStack prop doesn’t seem to be going down from navigator to the page itself, it is always undefined on sub components. I was able to go around it using a computed property (deriving from a global pageStack) on each page but it’s less than ideal.

With regards to pageStack woe itself:
When I use this,

this.pageStack = [];
this.pageStack.push(page);

the back button keeps showing up even though clearly there is only 1 page in pageStack.

When I use this:

this.pageStack.length = 1;
this.pageStack[0] = page;

back button behaves as it should, i.e. not showing up.

[Fran Diox]

@Saloniq-David said:

pageStack prop doesn’t seem to be going down from navigator to the page itself

It’s just a prop for the navigator, it is not automatically passed down. You can do it by using the syntax described on the third page of this tutorial.

this.pageStack = [];
this.pageStack.push(page);

The problem is how many pages there were before you reset the stack. If there was only 1 (the action would be “replace page”), I indeed found and fixed a bug for this situation.

this.pageStack.length = 1;
this.pageStack[0] = page;

This is not very recommendable because it does not follow Vue’s reactivity rules. Might work for this but perhaps creates other issues :/

If you want to try the latest dev build (both onsenui and vue-onsenui), you can download it here.