I am running the kitchen-sink with vuejs and trying to load data from the vuejs data() element to a picker. I understand it is not available in the setup → onPageInit as the page is not created fully. What is the easy way to do it.
In the code below I am trying to load the picker from the data element organization (which maybe loaded from a rest service later). What is the best way to do this?
<f7-page class="page-home" @page:afterin="onPageAfterIn" @page:beforeremove="onPageBeforeRemove"
@page:init="onPageInit">
<f7-navbar large transparent :sliding="false">
<! code removed for brevity -->
</f7-navbar>
<f7-block class="top-gap">
<div class="block-title">Organization</div>
<div class="list no-hairlines-md">
<ul>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-input-wrap">
<input id="demo-picker-device" type="text" placeholder="Select Organization" readonly="readonly" />
</div>
</div>
</div>
</li>
</ul>
</div>
</f7-block>
<f7-block>
<f7-row v-for="rowIcons in icons" :key="rowIcons">
<f7-col v-for="icon in rowIcons" :key="icon">
<div>
<f7-icon v-if="icon.icon" :f7="icon.icon"></f7-icon>
<div v-if="icon.text">{{ icon.text }}</div>
</div>
</f7-col>
</f7-row>
</f7-block>
</f7-page>
</template>
<script>
import {
f7Page,
f7Navbar,
f7NavLeft,
f7NavRight,
f7Link,
f7Searchbar,
f7Icon,
f7Block,
f7Row,
f7Col,
theme,
f7,
} from 'framework7-vue';
import { onMounted } from 'vue';
export default {
name: 'Home',
components: {
f7Page,
f7Navbar,
f7NavLeft,
f7NavRight,
f7Link,
f7Searchbar,
f7Icon,
f7Block,
f7Row,
f7Col
},
props: {
f7router: Object,
},
methods: {
},
data() {
return {
icons:
[
[
{'icon':'calendar', 'text':'Calendar'},
{'icon':'person_2', 'text':'Contact'},
{'icon':'briefcase_fill', 'text':'Account'}
],
[
{'icon':'rectangle_stack_fill_badge_plus', 'text':'Opportunities'},
{'icon':'person_circle_fill', 'text':'Campaign'},
{'icon':'clock', 'text':'Timesheet'}
],
[
{'icon':'money_dollar', 'text':'Expenses'},
{'icon':'checkmark', 'text':'Task'},
{'icon':'rectangle_on_rectangle_angled', 'text':'Notes'}
],
[
{'icon':'ant_circle', 'text':'Notes'},
{'icon':'', 'text':''},
{'icon':'', 'text':''}
]
],
organizations:
[
'Test Work',
'Test Team',
'DK Org',
'KNR Org'
]
}
},
// eslint-disable-next-line
setup({ f7router }) {
const onResize = () => {
const $el = f7.$('.page-home');
if (f7.width >= 768) {
$el.find('.list:not(.searchbar-not-found)').addClass('menu-list');
} else {
$el.find('.list:not(.searchbar-not-found)').removeClass('menu-list');
}
};
const onPageInit = () => {
const self = this;
// iOS Device picker
self.pickerDevice = f7.picker.create({
inputEl: '#demo-picker-device',
cols: [
{
textAlign: 'center',
values: [
'Test Work',
'Test Team',
'DK Org',
],
},
],
});
};
const onPageBeforeRemove = () => {
const self = this;
self.pickerDevice.destroy();
};
const onPageAfterIn = () => {
if (!theme.aurora) return;
if (f7.width >= 768) {
f7router.navigate('/about/', { reloadDetail: true });
}
};
onMounted(() => {
if (theme.aurora) {
const $el = f7.$('.page-home');
onResize();
f7.on('resize', onResize);
f7router.on('routeChange', (route) => {
const url = route.url;
if (!$el) return;
const $linkEl = $el.find(`a[href="${url}"]`);
if (!$linkEl.length) return;
$el.find('.item-selected').removeClass('item-selected');
$linkEl.addClass('item-selected');
});
}
});
return {
theme,
onPageAfterIn,
onPageInit,
onPageBeforeRemove
};
},
};
</script>