Onsen + VueJS: Call back from child component (using onsNavigatorProps)
-
Per documentation here
If page A pushes page B, it can send a function as a prop or data that modifies page A’s context. This way, whenever we want to send anything to page A from page B, the latter just needs to call the function and pass some arguments:
// Page A this.$emit('push-page', { extends: pageB, onsNavigatorProps: { passDataBack(data) { this.dataFromPageB = data; } } });
I am following this idea. Doing something similar with this.$store.commit
I want to push AddItemPage and get the returned value copied to this.items
//Parent.vue pushAddItemPage() { this.$store.commit('navigator/push', { extends: AddItemPage, data() { return { toolbarInfo: { backLabel: this.$t('Page'), title: this.$t('Add Item') } } }, onsNavigatorProps: { passDataBack(data) { this.items = data.splice() //***this*** is undefined here } } }) }, //AddItemPage.vue ... submitChanges() { this.$attrs.passDataBack(this, ['abc', 'xyz']) // passDataBack() is called, no issues. }, ...
Only problem is this is not available inside callback function.
So i can’t do this.items = data.splice()
-
-
Maybe in this case you can rewrite
passDataBack(data) {
aspassDataBack(data) => {
so thatthis
is correctly bound? If that doesn’t work, get your example set up on the Onsen UI Playground, and export it to Codepen and link it here.
-
Module build failed: SyntaxError: Unexpected token, expected { (265:29)
263 | }, 264 | onsNavigatorProps: { > 265 | passDataBack(data) => { | ^
I am using Node v8.11.2
-
-
Ah yes, you’re right. Apologies for my typo. Did that fix your issue?
-
Yes. Thanks for your help