Onsen + VueJS: Call back from child component (using onsNavigatorProps)

abrocks

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()

abrocks

@abrocks said:

onsNavigatorProps

Any one please!

asialgearoid

Maybe in this case you can rewrite passDataBack(data) { as passDataBack(data) => { so that this 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.

abrocks

Module build failed: SyntaxError: Unexpected token, expected { (265:29)

  263 |         },
  264 |         onsNavigatorProps: {
> 265 |           passDataBack(data) => {
      |                              ^

I am using Node v8.11.2

abrocks

@abrocks said:

> passDataBack(data) => {

should really be

passDataBack: (data) => {

asialgearoid

Ah yes, you’re right. Apologies for my typo. Did that fix your issue?

abrocks

Yes. Thanks for your help