How to call components with function/method in pages?

[kaizoku2508]

My partner create a login page with several components like “email”, “password”, “phone number”, “login button” and “forgot password”. But then ask me to move all the components into new vue under ‘/components’ folder. I only know to move the components but I cannot make it functional since the method is not callable. Please help.

original login page:

<template>
  <div class="q-pa-md" style="width: 400px">

    <q-form
      @submit="onSubmit"
      @reset="onReset"
      class="q-gutter-md"
    >
      <!-- <q-input
        filled
        v-model="email"
        label="Your email *"
        lazy-rules
        :rules="[val => !!val || 'Email is missing', isValidEmail]"
      />

      <q-input
        filled
        type="password"
        v-model="password"
        label="Password *"
        hint="Password should be 8 characters"
        lazy-rules
        :rules="[
          val => val !== null && val !== '' || 'Please enter your password',
          val => val.length === 8 || 'Please enter a valid password'
        ]"
      />

      <q-input
        filled
        type="number"
        v-model="phone"
        label="Your phone number *"
        lazy-rules
        :rules="[
          val => val !== null && val !== '' || 'Please enter your phone number',
          val => val.length > 8 && val.length < 12 || 'Please enter a valid number'
        ]"
      />

      <div>
        <q-btn label="Login" type="submit" color="primary"/>
        <q-btn flat to="/user/requestpassword" label="Forgot Password?" type="submit"/>
      </div> -->
    </q-form>

  </div>
</template>

<script>
export default {
  data () {
    return {
      email: null,
      password: null,
      phone: null,
      accept: false
    }
  },

  methods: {
    isValidEmail (val) {
      const emailPattern = /^(?=[a-zA-Z0-9@._%+-]{6,254}$)[a-zA-Z0-9._%+-]{1,64}@(?:[a-zA-Z0-9-]{1,63}\.){1,8}[a-zA-Z]{2,63}$/
      return emailPattern.test(val) || 'Invalid email'
    },
    onSubmit () {
      if (this.accept !== true) {
        this.$q.notify({
          color: 'red-5',
          textColor: 'white',
          icon: 'warning'
        })
      } else {
        this.$q.notify({
          color: 'green-4',
          textColor: 'white',
          icon: 'cloud_done',
          message: 'Submitted'
        })
      }
      this.onReset()
    },

    onReset () {
      this.email = null
      this.password = null
      this.phone = null
      this.accept = false
    }
  }
}
</script>

new component vue:

<template>
  <q-input
        filled
        v-model="email"
        label="Your email *"
        lazy-rules
        :rules="[val => !!val || 'Email is missing', isValidEmail]"
      />

    <q-input
        filled
        type="password"
        v-model="password"
        label="Password *"
        hint="Password should be 8 characters"
        lazy-rules
        :rules="[
          val => val !== null && val !== '' || 'Please enter your password',
          val => val.length === 8 || 'Please enter a valid password'
        ]"
      />

      <q-input
        filled
        type="number"
        v-model="phone"
        label="Your phone number *"
        lazy-rules
        :rules="[
          val => val !== null && val !== '' || 'Please enter your phone number',
          val => val.length > 8 && val.length < 12 || 'Please enter a valid number'
        ]"
      />

      <div>
        <q-btn label="Login" type="submit" color="primary"/>
        <q-btn flat to="/user/requestpassword" label="Forgot Password?" type="submit"/>
      </div>
</template>

<script>
export default {

}
</script>

[dobbel]

@kaizoku2508

My partner create a login page

btw I don’t see any page( containing a q-page) in your original ‘page’ code

Login component in components/Login.vue:

<template>
  <div class="q-pa-md" style="width: 400px">

    <q-form
      @submit="onSubmit"
      @reset="onReset"
      class="q-gutter-md"
    >
    <q-input
        filled
        v-model="email"
        label="Your email *"
        lazy-rules
        :rules="[val => !!val || 'Email is missing', isValidEmail]"
      />

      <q-input
        filled
        type="password"
        v-model="password"
        label="Password *"
        hint="Password should be 8 characters"
        lazy-rules
        :rules="[
          val => val !== null && val !== '' || 'Please enter your password',
          val => val.length === 8 || 'Please enter a valid password'
        ]"
      />

      <q-input
        filled
        type="number"
        v-model="phone"
        label="Your phone number *"
        lazy-rules
        :rules="[
          val => val !== null && val !== '' || 'Please enter your phone number',
          val => val.length > 8 && val.length < 12 || 'Please enter a valid number'
        ]"
      />

      <div>
        <q-btn label="Login" type="submit" color="primary"/>
        <q-btn flat to="/user/requestpassword" label="Forgot Password?" type="submit"/>
      </div> -->
    </q-form>

  </div>
</template>

<script>
export default {
  data () {
    return {
      email: null,
      password: null,
      phone: null,
      accept: false
    }
  },

  methods: {
    isValidEmail (val) {
      const emailPattern = /^(?=[a-zA-Z0-9@._%+-]{6,254}$)[a-zA-Z0-9._%+-]{1,64}@(?:[a-zA-Z0-9-]{1,63}\.){1,8}[a-zA-Z]{2,63}$/
      return emailPattern.test(val) || 'Invalid email'
    },
    onSubmit () {
      if (this.accept !== true) {
        this.$q.notify({
          color: 'red-5',
          textColor: 'white',
          icon: 'warning'
        })
      } else {
        this.$q.notify({
          color: 'green-4',
          textColor: 'white',
          icon: 'cloud_done',
          message: 'Submitted'
        })
      }
      this.onReset()
    },

    onReset () {
      this.email = null
      this.password = null
      this.phone = null
      this.accept = false
    }
  }
}
</script>

Login page containing a QPage and your custom Login component:

<template>
  <q-page>
      <Login/>
  </q-page>
</template>

<script>

import Login from "src/components/Login"

 export default {
   components:{Login},
   data () {}
 }
</script>