About Framework7-vue Lifecycle question

Hi,

I’m newbie with framework7 and VueJS.
I’m using framework7-vue 6.3.5 for my website. It’s a app with a tab bar below.
My goal is: I want to get callback when tab is active and deactivate because I want to check user login status and navigate to proper page by code.

I checked the documentations,

it has view:init, tab:show or tab:hide maybe I can use.

but one of my question is: How to reach it ?

Here is how tried,

  1. Using some lifecycle callback in FirstTab
export default {
  mounted() {
    console.log("[FirstTab] mounted()");
  },
  unmounted() {
    console.log("[FirstTab] unmounted()");
  },
  activated() {
    console.log("[FirstTab] activated()");
  },
  deactivated() {
    console.log("[FirstTab] deactivated()");
  },
};

only mounted() will be called.

  1. Trying add event listener in FirstTab
export default {
  setup(props) {
    f7.on('view:init', (data) => {
      console.log('[FirstTab] view:init');
    });

    f7.on('tab:show', (data) => {
      console.log('[FirstTab] tab:show');
    });

    f7.on('tab:hide', (data) => {
      console.log('[FirstTab] tab:hide');
    });
    return {
      // ...
    };
  },
};

not working.

  1. Bind event within html template
<f7-page @tab:hide="onMyTabHide" @tab:show="onMyTabShow" @view:init="onMyViewInit" name="home">
  <!-- Some htmls -->
</f7-page>
export default {
  methods: {
    onMyTabShow() {
      console.log("[FirstTab] onMyTabShow()");
    },
    onMyTabHide() {
      console.log("[FirstTab] onMyTabHide()");
    },
    onMyViewInit() {
      console.log("[FirstTab] onMyViewInit()");
    },
  }
};

methods not called.

  1. I founded that this.$parent.tabActive can get the tabActive status. So I trying use watch method.

Reference: Watchers | Vue.js

export default {
  watch: {
    '$parent.tabActive'(newValue, oldValue) {
      console.log('[FirstTab] tabActive:' + newValue);
    }
  },
};
  1. Trying to register the tabActive status within mounted() at FirstTab
export default {
  mounted() {
    f7ready(() => {
      this.$watch('$parent.tabActive', (newValue, oldValue) => {
        console.log('[FirstTab] tabActive:' + newValue);
      });
    });
  },
};

Not working as expected.

  1. Trying to use computed + watch
export default {
  computed: {
    myTabActive() {
      return this.$parent.tabActive;
    }
  },
  watch: {
    myTabActive(newValue, oldValue) {
      console.log('[FirstTab] tabActive:' + newValue);
    },
  },
};
export default {
  mounted() {
    f7ready(() => {
      this.$watch('$parent.tabActive', (newValue, oldValue) => {
        console.log('[FirstTab] tabActive:' + newValue);
      });
    });
  },
};

How to get the view status event in Framework7-vue?
Am I concept wrong? Please give me some advices.
Thanks.

here => blissful-rosalind-nsf3p4 - CodeSandbox

1 Like