V-show and v-if blocking back navigation

1

Hey all,

Here’s a weird situation. If I show/hide any content dynamically, ie:

<div v-show="items.length > 0" class="title-medium-container title-with-link">
 <h2>Title</h2>
   <a href="/path/" class="col button button-small button-round button-fill">See All</a>
   <a :href="'/path/' + pathID +'/'" v-for="(item, index) of items" v-bind:key="'item' + index" :id="index">etc...

If I add v-show/v-if to any element on the page, once I go into the page, I can’t go back with this:

<a href="#" class="link back close-button">

I’ve tried this on multiple pages, and it seems whenever I programmatically show/hide elements, I’m unable to step back to the page. It works as expected without the v-show.

Likely something I’m doing wrong, but any reason why back doesn’t work in this instance?

Thanks!
N.

2

Something weird is happening. Do you see any errors in console? If not, maybe you can create some minimal reproduction project using Vue code sandbox template from this thread How to ask a good question on forum ?

3

Thanks for the sandbox link (sheepishly I hadn’t read that thread). No errors of any kind which would help.

4

So I can close this thread off, I found the likely cause. There was a Vuex state reactivity issue on the previous page. My assumption is that caused webpack to recompile and therefore impacted on the history. Short version, not Vlad’s awesome framework (of course)!

1 Like