Login screen not popping up in Vue

Questions
1

I’m not sure what I’m doing wrong, but the login screen doesn’t pop up when the button is clicked:

<script lang="ts">
import {
  f7Navbar,
  f7Page,
  f7LoginScreen,
  f7List,
  f7ListItem,
  f7Block,
  f7Button,
  f7LoginScreenTitle,
  f7BlockFooter,
  f7ListButton,
  f7ListInput,
  f7,
} from 'framework7-vue';

export default {
  data() {
    const f7AppParams = {
      name: 'My App',
      theme: 'auto',
    };

    return {
      username: '',
      password: '',
      loginScreenOpened: false,
      f7AppParams,
    };
  },
  methods: {
    signIn() {
      f7.dialog.alert(`Username: ${this.username}<br>Password: ${this.password}`, () => {
        f7.loginScreen.close();
      });
    },
    doIt() {
      console.log('Did it, easily');
      this.loginScreenOpened = true;
    }
  }
}
</script>

<template>
<f7-app v-bind="f7AppParams">
  <f7-view main>
    <f7-page>
      <f7-navbar dark :title="f7AppParams.name"></f7-navbar>
      <f7-block>
        <f7-button raised large fill @click="doIt">Open Via Prop Change</f7-button>
      </f7-block>
      <f7-login-screen>
        <f7-page login-screen v-model:opened="loginScreenOpened" @loginscreen:closed="loginScreenOpened = false">
          <f7-login-screen-title>Sign In</f7-login-screen-title>
          <f7-list form>
            <f7-list-input
              label="Username"
              type="text"
              :value="username"
              @input="username = $event.target.value"
              placeholder="Username">
            </f7-list-input>
            <f7-list-input
              label="Password"
              type="password"
              :value="password"
              @input="password = $event.target.value"
              placeholder="Password">
            </f7-list-input>
          </f7-list>
          <f7-list>
            <f7-list-button @click="signIn">Sign In</f7-list-button>
          </f7-list>
        </f7-page>
      </f7-login-screen>
    </f7-page>
  </f7-view>
</f7-app>
</template>
2

in the inspector, I can see that the div for the login screen has an opened attribute that gets switched from false to true, but that’s about it.

3

opened prop must be set on LoginScreen component, not on the page component

1 Like