[SOLVED] Having trouble reacting to page events

Questions
1

Hello,
I have some troubles using page events.
On the “tab” app generated with the CLI, I replace the home page with the code below, but none of the events are triggered/detected.
I suppose I’m doing something wrong, so I would be thankful for a bit of help :slight_smile:
Thank you!

<template>
  <f7-page name="home">
    <!-- Top Navbar -->
    <f7-navbar title="MyApp"></f7-navbar>
    <!-- Page content-->
    <f7-block strong>
      <p>Content of the page</p>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  on: {
    pageMounted: function(e, page) {
      console.log("page mounted");
    },
    pageInit: function(e, page) {
      console.log("page init"); 
    },
    pageBeforeIn: function(e, page) {
      console.log("page before in");
    },
    pageAfterIn: function(e, page) {
      console.log("page after in");
    },
    pageBeforeOut: function(e, page) {
      console.log("page before out");
    },
    pageAfterOut: function(e, page) {
      console.log("page after out");
    },
    pageBeforeUnmount: function(e, page) {
      console.log("page before unmount");
    },
    pageBeforeRemove: function(e, page) {
      console.log("page before remove");
    }
  }
};
</script>
2

hi, you are using vuejs.

so you can use vue events, like “created”, “mounted”, etc

vuejs lifecycle

lifecycle.png1200×3039 48.8 KB

also you can listen to any f7 event using vue
eg:

<template>
  <f7-page name="home" @page:init='pageInitHandler'>
    ...
  </f7-page>
</template>
<f7-page name="home">
<script>
export default {
  name: 'Home',
  data () {
    return {
      // your data
    }
  },
  methods: {
    pageInitHandler: page => {
    
    }
  },
  ...
}
</script>

here you have the events:

https://framework7.io/vue/page.html#page-events

another way is to listen to events on router;
eg:

export default [
  ...
  {
    path: '/',
    on: {
      pageMounted: function(e, page) {
        console.log("page mounted");
      },
      pageInit: function(e, page) {
        console.log("page init"); 
      },
      pageBeforeIn: function(e, page) {
        console.log("page before in");
      },
      pageAfterIn: function(e, page) {
        console.log("page after in");
      },
      pageBeforeOut: function(e, page) {
        console.log("page before out");
      },
      pageAfterOut: function(e, page) {
        console.log("page after out");
      },
      pageBeforeUnmount: function(e, page) {
        console.log("page before unmount");
      },
      pageBeforeRemove: function(e, page) {
        console.log("page before remove");
      }
    },
  }
  ...
]
1 Like
3

Many thanks!

I didn’t knew this way of listening to the events, it works great! :slight_smile:

This said, I still have an issue. I have a “routable popup”.
Thanks to your help, it now has the following template:

<template>
  <f7-page
    name="intro"
    @page:beforein="pageBeforeInHandler"
    @page:afterin="pageAfterInHandler"
    @page:reinit="pageReinitHandler"
    @page:init="pageInitHandler"
    @page:afterout="pageAfterOutHandler"
    @popup:open="popupOpenHandler"
    @popup:opened="popupOpenedHandler"
  >
    ...
  </f7-page>
</template>

And I have the corresponding methods that leave a message in the console for each of the event.

When I load the app, the popup is opened with this page, and I observe in my console the following events: init, beforein, afterin.

When I move from this page to another page in the same popup, I read in my console: afterout

Then, I close the popup and it disappears.

And then, I click on a button to open the popup again, and there is none of the “opening” events (init, beforein, afterin)

Note: neither the open nor the opened event are triggered, but I suppose it’s normal since they are “popup” events and not “page of the popup” events.

The issue behind all this is that I have a “swiper” in this page.
When I load the app the first time with the popup opened, the swiper works well. But once the popup is closed, it does not work correctly when the popup re-open. So I had the intention to init/destroy the swiper everytime the page appears/disappears. But without events to detect it, it’s complicated.

Anyway, thanks a lot for your answer!

4

Because page was already initialized. When you closed popup, it is not got removed, it is still in DOM or memory. Maybe you need to listen for popup:open and popuip:close events instead on popup?

5

Thanks,

My issue is that the Swiper does not init correctly the second time the popup opens.
So I thought I would force an init when the page appears and a destroy when it disappears.

But:

  1. I would like to keep my init/destroy script in the same single file component than the swiper itself for clarity
  2. This component is a page, and is not necessarily opened as a popup

(but perhaps you have a solution for a correct initialization of swipers hidden in a closed popup that then open? :stuck_out_tongue:)

Thanks again for your help!

6

You can just try to add observer: true and observeParents: true to swiper parameters. It should solve your issues

1 Like
7

Thanks a lot! :slight_smile:
It worked like a charm!