How to pass variable back from app.f7.html to home.f7.html if app.f7.html is used as the login screen?

1

I have my login screen in app.f7.html with all methods to log in with Facebook there too and after I logged in I want to have the user data and all json arrays available at the the home.f7.html page but it seems that are not there when I finished logged in…

how can I pass the variables from app.f7.html to home.f7.html?

I have for instance this code inside app.f7.html

<template>
  <div id="app">


    <!-- Your main view, should have "view-main" class -->
    <div class="view view-main view-init safe-areas" data-url="/"></div>


    <!-- Login Screen -->
    <div class="login-screen" id="my-login-screen">login code here</div>
...

</template>
<script>

  export default {
    data() {
      return {
      loggedIn: false,
      user: null,
      };
      
    },
    methods: {

      SignInWithFacebook: function () {
.....
          self.$setState({
            loggedIn: true,
            user: {
              name: 'test'
            }
          });
.....

at home.f7.html the user is still null and loggedIn still false…

      {{#if user}}
           {{user.name}}
      {{else}}
      no info
      {{/if}}

any tips how to pass all variables after logged in from app.f7.html to home.f7.html?

thanks

2

In page components, root data available as $root.user https://framework7.io/docs/router-component.html#main-app-component

Now, if we need to call main app component methods or change its data, we can reference its instance via app.rootComponent . And from other components it is available as this.$root .

1 Like
3

thank you so much for the tip to solve this! I will really like to have login screen inside the app.f7.html and some methods there… this really helps!

thank you