I have link in a home page where I have a autocomplete. I click on the autocomplete link go to autocomplete page and I select some value from the autocomplete dropdown. Once done I click on the button on autocomplete page which navigates to home page.
Now when I again go to autocomplete page by clicking on the link on home page. The autocomplete on the page do not render anything.
PS:
I encounter this problem only when I use stackPages=“true” in app.vue
<f7-view url="/" :main="true" class="ios-edges" :preloadPreviousPage="false" :stackPages="true">
But do not encounter any problem and autocomplete works fine if do not use it for eg.
<f7-view url="/" :main="true" class="ios-edges" :preloadPreviousPage="false" >
In app.vue I have:
<template>
<!-- App -->
<f7-app :params="f7params">
<f7-statusbar></f7-statusbar>
<f7-panel left cover>
<f7-view url="/panel-left/" links-view=".view-main" />
</f7-panel>
<f7-view url="/" :main="true" class="ios-edges" :preloadPreviousPage="false" :stackPages="true">
</f7-view>
</f7-app>
</template>
IN home.vue I have:
<f7-list-item link="/autocomplete/" title="Auto Complete" panel-close>
<f7-icon slot="media" icon="fas fa-rss fa-fw"></f7-icon>
</f7-list-item>
and in autocomplete vue I have
<template>
<f7-page @page:beforeremove="onPageBeforeRemove" @page:init="onPageInit">
<f7-navbar title="Autocomplete" back-link="Back">
</f7-navbar>
<f7-block-title>Dropdown Autocomplete</f7-block-title>
<div class="list no-hairlines-md">
<div class="block-header">Dropdown With All Values</div>
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Fruit</div>
<div class="item-input-wrap">
<input type="text" placeholder="Fruit" id="autocomplete-dropdown-all"/>
</div>
</div>
</li>
</ul>
</div>
<f7-button fill @click.prevent="submit()" class="col">submit</f7-button>
</f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
export default {
components: {
f7Page,
f7Navbar,
f7BlockTitle,
},
data() {
return {
fruits: 'Apple Apricot Avocado Banana Melon Orange Peach Pear Pineapple'.split(' '),
};
},
methods: {
submit(){
const self = this;
const app = self.$f7;
const $ = self.$$;
self.$f7router.navigate("/");
},
onPageBeforeRemove() {
const self = this;
self.autocompleteDropdownAll.destroy();
},
onPageInit() {
const self = this;
const app = self.$f7;
const fruits = self.fruits;
const $ = self.$$;
// Dropdown with all values
self.autocompleteDropdownAll = app.autocomplete.create({
inputEl: '#autocomplete-dropdown-all',
openIn: 'dropdown',
source(query, render) {
const results = [];
// Find matched items
for (let i = 0; i < fruits.length; i += 1) {
if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
}
// Render items by passing array with result items
render(results);
},
});
},
},
};
</script>