Ok, i figured it out. If I enclose my <q-form> in a <div> it works. Now im really really curious to know why ?

@metalsadman

Hi again,

i removed the line (this.$refs.dialog as Element & { hide: () => boolean }).hide() and added a console.log instead and its never reaching the function. The qform validation seems to be blocking me. If i remove the <q-form> without changing anything else, it works as expected.

@metalsadman

Seems like its not working. Im triggering the dialog from another component. I don’t know if it changes something. When I click on the cancel button, it’s being block and it bring me back to my empty field. I’ve copied the whole component code here. I must be doing something wrong. Any way i can cancel the validation from happening ?

<template>
  <q-dialog
    v-model="showDialog"
    persistent
    ref="dialog"
  >
    <q-form
      class="q-gutter-md"
    >
      <q-card style="width: 500px">
        <q-toolbar class="bg-blue">
          <q-icon name="login" style="font-size: 32px"/>

          <q-toolbar-title><span class="text-weight-bold">Sign In</q-toolbar-title>

          <q-btn flat round dense icon="close" @click="onClose()" />

        </q-toolbar>
        <q-card-section>
          <q-input 
            dense
            v-model="email"
            autofocus
            label="Enter Email"
            @keyup.enter="onSubmit"
            lazy-rules
            :rules="[ val => val && val.length > 0 || 'Please enter your email address']"
          />
          <q-input 
            dense
            v-model="password"
            label="Enter Password"
            :type="isPwd ? 'password' : 'text'"
            @keyup.enter="onSubmit"
            lazy-rules
            :rules="[ val => val && val.length > 0 || 'Please enter your password']"
          >
            <template v-slot:append>
              <q-icon
                :name="isPwd ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="isPwd = !isPwd"
              />
            </template>
          </q-input>
        </q-card-section>
        <q-card-actions align="right" class="text-primary">
          <q-btn flat label="Cancel" @click="onClose()"/>
          <q-btn flat label="Sign In" @click="onSubmit()" color="primary"/>
        </q-card-actions>

      </q-card>
    </q-form>
  </q-dialog>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import { readLoginError } from '../store/main/getters';
import { dispatchLogIn } from '../store/main/actions';

export default defineComponent({
  name: 'Login',
  props: {
    showDialog: {
      default: false,
      type: Boolean,
    },
  },
  data () {
    return {
      email: '',
      password: '',
      isPwd: true,
    }
  },
  methods: {
    async onSubmit () {
      await dispatchLogIn(this.$store, {username: this.email, password: this.password})
      if (readLoginError(this.$store)) {
        // fail
        this.$q.notify({
          color: 'negative',
          position: 'top',
          message: 'Incorrect email or password',
          icon: 'report_problem'
        })
      }else{
        this.onClose()
      }
    },
    onClose () {
      (this.$refs.dialog as Element & { hide: () => boolean }).hide()
      this.isPwd = true
      this.email = '';
      this.password = '';
      this.$emit('closeSignInDialog')
    }
  },
});
</script>

Hi,

I have a dialog with a qform with inputs with rules on them and i want to be able to close the dialog by pressing cancel button without entering any values in the inputs. How can i do it because right now, it won’t let me cancel because my field are empty and i have a rule that says those fields are required.

Any ideas ?

@kennyrafael

Hey Kenny,

i was able to fix it by export the store at initialisation

import { store } from 'quasar/wrappers';
import Vuex from 'vuex';

// import example from './module-example';
// import { ExampleStateInterface } from './module-example/state';
import { mainModule } from './main';
import { State } from './state';
/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation
 */

--> let myStore
 
export default store(function ({ Vue }) {
  Vue.use(Vuex);

  const Store = new Vuex.Store<State>({
    modules: {
      main: mainModule
    },

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: !!process.env.DEV
  });
-->  myStore = Store
  return Store;
});

--> export  { myStore }

Then import it in another vue file

import { myStore }  from "../store";

...

  if (!myStore.getters.isLoggedIn) {
    ...
 }

Enjoy

Hi,

i’ve created my quasar project using the CLI and im using Typescript.

Here is my store/index.js

import { store } from 'quasar/wrappers';
import Vuex from 'vuex';

// import example from './module-example';
// import { ExampleStateInterface } from './module-example/state';
import { mainModule } from './main';
import { State } from './state';
/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation
 */

export interface StateInterface {
  // Define your own store structure, using submodules if needed
  // example: ExampleStateInterface;
  // Declared as unknown to avoid linting issue. Best to strongly type as per the line above.
  example: unknown;
}

export default store(function ({ Vue }) {
  Vue.use(Vuex);

  const Store = new Vuex.Store<State>({
    modules: {
      main: mainModule
    },

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: !!process.env.DEV
  });
  return Store;
});

Now im my router/route.js

import { RouteConfig } from 'vue-router';
import store from "../store/";
import { Notify } from 'quasar';

const routes: RouteConfig[] = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        component: () => import('pages/Index.vue')
      },
      { 
        path: 'aci-subnet',
        component: () => import('pages/AciSubnet.vue'),
        beforeEnter: (to, from, next) => {
          console.log(store)
          if (!store.getters.main.readIsLoggedIn) {
            Notify.create('Please sign in to access this page')
          }
          else{
            next()
          }
        }
      },
}
...

export default routes;

When I try to access the store i get this error -->
TS2339: Property ‘getters’ does not exist on type ‘StoreCallback’.

Can anybody help me ?

@dobbel

Yup it makes sense, but I think I prefer to have my dialog inside my component.

And I like your name suggestion for the event.

Thx again for your help.

@dobbel

I just figured it out because you made me think. You rock!

I ended moving my <dialog> into my login component itself and then adding a props “showDialog” that i can set from parent

Child : components/Login.vue

<template>
  <q-dialog
--->    v-model="showDialog"
    persistent
    transition-show="flip-down"
    transition-hide="flip-up"
  >

...

</template>
<script>
...

props: {
-->    showDialog: {
      default: false,
      type: Boolean,
    },
  },

methods: {
    async onSubmit () {
      await dispatchLogIn(this.$store, {username: this.email, password: this.password})
      if (readLoginError(this.$store)) {
        // fail
        this.$q.notify({
          color: 'negative',
          position: 'top',
          message: 'Incorrect email or password',
          icon: 'report_problem'
        })
      }else{
--->        this.showDialog = false
      }
...
</script>

and then on parent : pages/main.vue

<template>
  <login :showDialog="showSignInDialog"></login>
</template>
<script>
...

data () {
    return {
      showSignInDialog: false
    }
  },

</script>

@dobbel

ok let me clarify. These are 2 different vue files. (im a noob in vue)

Parent: pages/main.vue

<template>
        <q-dialog
          v-model="signInDialog"
          @closeSignInDialog="signInDialog = false"
          persistent
          transition-show="flip-down"
          transition-hide="flip-up"
        >
          <login></login>
        </q-dialog>
</template>
<script lang="ts">
import Login from 'components/Login.vue'
import { defineComponent, ref } from '@vue/composition-api';

export default defineComponent({
  name: 'MainLayout',
  data () {
    return {
      signInDialog: false
    }
  },
  components: { Login },
  setup() {
    const leftDrawerOpen = ref(false);

    return {leftDrawerOpen}
  }
});
</script>

Child : components/Login.vue

<template>
...
</template>
<script>
...

methods: {
    async onSubmit () {
      await dispatchLogIn(this.$store, {username: this.email, password: this.password})
      if (readLoginError(this.$store)) {
        // fail
        this.$q.notify({
          color: 'negative',
          position: 'top',
          message: 'Incorrect email or password',
          icon: 'report_problem'
        })
      }else{
---->        this.$emit("closeSignInDialog")
      }
    }
  },
});
</script>

I don’t want to move my code from login.vue component to main.vue page.

Does it makes sens ?

@dobbel
Im not sure I understand, if I copy my login component (child) directly into my q-dialog (parent) then i wont have a child/parent, only parent so it should work ?