Hi,
I’m newbie with framework7 and VueJS.
I’m using framework7-vue 6.3.5 for my website. It’s a app with a tab bar below.
My goal is: I want to get callback when tab is active and deactivate because I want to check user login status and navigate to proper page by code.
I checked the documentations,
it has view:init
, tab:show
or tab:hide
maybe I can use.
but one of my question is: How to reach it ?
Here is how tried,
- Using some lifecycle callback in FirstTab
export default {
mounted() {
console.log("[FirstTab] mounted()");
},
unmounted() {
console.log("[FirstTab] unmounted()");
},
activated() {
console.log("[FirstTab] activated()");
},
deactivated() {
console.log("[FirstTab] deactivated()");
},
};
only mounted()
will be called.
- Trying add event listener in FirstTab
export default {
setup(props) {
f7.on('view:init', (data) => {
console.log('[FirstTab] view:init');
});
f7.on('tab:show', (data) => {
console.log('[FirstTab] tab:show');
});
f7.on('tab:hide', (data) => {
console.log('[FirstTab] tab:hide');
});
return {
// ...
};
},
};
not working.
- Bind event within html template
<f7-page @tab:hide="onMyTabHide" @tab:show="onMyTabShow" @view:init="onMyViewInit" name="home">
<!-- Some htmls -->
</f7-page>
export default {
methods: {
onMyTabShow() {
console.log("[FirstTab] onMyTabShow()");
},
onMyTabHide() {
console.log("[FirstTab] onMyTabHide()");
},
onMyViewInit() {
console.log("[FirstTab] onMyViewInit()");
},
}
};
methods not called.
- I founded that
this.$parent.tabActive
can get the tabActive status. So I trying usewatch
method.
Reference: Watchers | Vue.js
export default {
watch: {
'$parent.tabActive'(newValue, oldValue) {
console.log('[FirstTab] tabActive:' + newValue);
}
},
};
- Trying to register the tabActive status within mounted() at FirstTab
export default {
mounted() {
f7ready(() => {
this.$watch('$parent.tabActive', (newValue, oldValue) => {
console.log('[FirstTab] tabActive:' + newValue);
});
});
},
};
Not working as expected.
- Trying to use computed + watch
export default {
computed: {
myTabActive() {
return this.$parent.tabActive;
}
},
watch: {
myTabActive(newValue, oldValue) {
console.log('[FirstTab] tabActive:' + newValue);
},
},
};
export default {
mounted() {
f7ready(() => {
this.$watch('$parent.tabActive', (newValue, oldValue) => {
console.log('[FirstTab] tabActive:' + newValue);
});
});
},
};
How to get the view status event in Framework7-vue?
Am I concept wrong? Please give me some advices.
Thanks.