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



  • @abrocks said:

    onsNavigatorProps

    Any one please!


  • Onsen UI

    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.



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

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

    I am using Node v8.11.2



  • @abrocks said:

    > passDataBack(data) => {
    

    should really be

    passDataBack: (data) => {
    

  • Onsen UI

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



  • Yes. Thanks for your help


Log in to reply