Login Screen F7 (Vue) V6

1

Hi,

I have problem with the structure of login screen in this v6, while its running well in v5.
This is the code :

<template>
<f7-page name="home-page" >
  <f7-block>
    <f7-button raised large fill @click="loginScreenOpened = true">Open Via Prop Change</f7-button>
  </f7-block>

  <f7-login-screen class="demo-login-screen" :opened="loginScreenOpened" @loginscreen:closed="loginScreenOpened = false">
    <f7-page login-screen>
      <f7-login-screen-title>Framework7</f7-login-screen-title>
      <f7-list form>
        <f7-list-input
          label="Username"
          type="text"
          placeholder="Your username"
          :value="username"
          @input="username = $event.target.value"
        ></f7-list-input>
        <f7-list-input
          label="Password"
          type="password"
          placeholder="Your password"
          :value="password"
          @input="password = $event.target.value"
        ></f7-list-input>
      </f7-list>
      <f7-list>
        <f7-list-button @click="signIn">Sign In</f7-list-button>
        <f7-block-footer>Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</f7-block-footer>
      </f7-list>
    </f7-page>
  </f7-login-screen>
</f7-page>
</template>
<script>
  import { f7 } from 'framework7-vue';

  export default {
    data() {
      return {
        loginScreenOpened: false,
        username: '',
        password: '',
      };
    },
    methods: {
      signIn() {
        f7.dialog.alert(`Username: ${self.username}<br>Password: ${self.password}`, () => {
          f7.loginScreen.close();
        });
      },
    },
  }
</script>

When I clicked the “Open Via Prop Change” button, it will show this structure in the inspect element :

image
image797×356 17.7 KB

But when I changed the default value of local variable “loginScreenOpened” as true, it will show this structure in the inspect element :

image
image476×533 16.7 KB

The position of login-screen is different. How to make the structure like the first pict, when I changed the default value of local variable “loginScreenOpened” as true?

Pleas Help.
Thank you.

2

It won’t work, there is no much sense to load the page with opened login screen. Make a routable login screen instead

3

Okay, I will try using route.
But actually, open login screen like my issue works well in v5 (vue).
That’s why I tried the same thing in v6 :grin:

4

Is your problem already solved?
How did you do? :relaxed:

5

Just manipulate in routes like this

{
    path: '/',
    beforeEnter({ resolve, reject }) {
      if (isLogged) {
        resolve();        
        f7.views.main.router.navigate('/home/');
      } else {
        reject();
        f7.views.main.router.navigate('/login/');
      }
    }
  }