I have this problem where I have to call a specific page and everytime it creates another instance, it generates undefined values which is should not be doing.
for example, as a rule, there are elements in ids in the first instance of the page, so the current pages all its data has been blocked, so how do you remove the first instance of the page. Iād like to make a function that detects pages if they existed already and then replace with the new current instance.
Just like when you turn of the stack pages setting in the view,
what it does is it removes the 3rd page I think in the dom but saves a session to retrieve later in order you can go back to that page, from what I understand it works like that.
Iād like to apply it like that, but with stacking pages enabled,
Since a page has element IDās which only usable once, unique pages should appear distinctly on the dom. but if you go back to pages, all its actions should remain the same.
Enabling Stackpages makes your pages still in the DOM and added class āStackedā but its not ideal if you have lots of navigations links in a menu panel. It will create more instance of a page which is creating duplicate pages in the dom.
Still, I need to use stackpages in order to save actions/sessions going back and forth in pages.
Still, there is no option to remove such pages from DOM and you shouldnāt. There are many ways of doing it in right way.
First of all you may use more unique selectors and donāt use IDs at all, or something like .page#prospects.page-current.
But better and correct is not to rely on page IDs at all. For example, if you use router component, you can refer to page element like this.$el so this.$el.find('.block') will give you Blocks within current page.
Also if you use Router component or Vue or React then there is a way to preserve page state without stackPages, e.g.:
<template>
<div class="page">
...
<input value="{{name}}" @input="onNameChange">
</div>
</template>
<script>
var name = '';
return {
data: function () {
return {
name: name
}
},
methods: {
onNameChange: function (e) {
name = e.target.value; // overwrite global scope var for this page component
this.$setState({
name: name,
});
},
},
}
</script>