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