How can i pull form values to another page-CodePudding

How can I get the email address entered while registering to this next page? If the query method is appropriate, it is my preference. I want to pull the e-mail address I entered on the signUp page to the verify Code page.

VerifyCode.vue

<template>
    <Form
      @submit="onVerifyCode"
      id="kt_verifyCode_form"
    >
      <div >
        <label >Code</label>
        <Field
          
          type="text"
          name="code"
          autocomplete="off"
          v-model="code"
        />
      </div>
      <div >
        <button
          id="kt_verifyCode_submit"
          ref="submitButton"
          type="submit"
          
        >
          <span > Submit </span>
        </button>
      </div>
    </Form>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: "verifyCode",
  data() {
    return {
      code: "",
    };
  },
  setup() {
    const store = useStore();
    const router = useRouter();

    const onVerifyCode = async (values) => {
      // Clear existing errors
      store.dispatch(Actions.LOGOUT);

      // eslint-disable-next-line
      submitButton.value!.disabled = true;

      // Activate indicator
      submitButton.value?.setAttribute("data-kt-indicator", "on");
      const data = {
        code: values.code,
      };
      // Send verify code request
      await store.dispatch(Actions.VERIFY_CODE, data);
      const [errorName] = Object.keys(store.getters.getErrors);
      const error = store.getters.getErrors[errorName];

      if (!error) {.then(function () {
          // Go to page after successfully login
          router.push({ name: "projects" });
        });
      } else {}

      submitButton.value?.removeAttribute("data-kt-indicator");
      // eslint-disable-next-line
      submitButton.value!.disabled = false;
    };

    return {
      verifyCode,
      onVerifyCode,
      submitButton,
    };
  },
});
</script>

SignUp.vue

    <template>
        <Form
          @submit="onSubmitRegister"
          id="kt_login_signup_form"
        >
          <!--begin::Input group-->
          <div >
            <!--begin::Col-->
            <div >
              <label >First Name</label>
              <Field
                
                type="text"
                placeholder=""
                name="givenName"
                autocomplete="off"
                v-model="givenName"
              />
            </div>
            <!--end::Col-->
    
            <!--begin::Col-->
            <div >
              <label >Last Name</label>
              <Field
                
                type="text"
                placeholder=""
                name="familyName"
                autocomplete="off"
                v-model="familyName"
              />
            </div>
            <!--end::Col-->
          </div>
          <!--end::Input group-->
          <!--begin::Input group-->
          <div >
            <label >Company</label>
            <Field
              
              type="text"
              placeholder=""
              name="companyName"
              autocomplete="off"
              v-model="companyName"
            />
          </div>
          <!--end::Input group-->
          <!--begin::Input group-->
          <div >
            <label >Email</label>
            <Field
              
              type="email"
              placeholder=""
              name="email"
              autocomplete="off"
              v-model="email"
            />
          </div>
          <!--end::Input group-->
    
          <!--begin::Input group-->
          <div  data-kt-password-meter="true">
            <!--begin::Wrapper-->
            <div >
              <!--begin::Label-->
              <label > Password </label>
              <!--end::Label-->
    
              <!--begin::Input wrapper-->
              <div >
                <Field
                  
                  type="password"
                  placeholder=""
                  name="password"
                  autocomplete="off"
                  v-model="password"
                />
              </div>
              <!--end::Input wrapper-->
            </div>
            <!--end::Wrapper-->
          </div>
          <!--end::Input group--->
    
          <!--begin::Input group-->
          <div >
            <label 
              >Confirm Password</label
            >
            <Field
              
              type="password"
              placeholder=""
              name="password_confirmation"
              autocomplete="off"
              v-model="password_confirmation"
            />
          </div>
          <!--end::Input group-->
    
          <!--begin::Actions-->
          <div >
            <button
              id="kt_sign_up_submit"
              ref="submitButton"
              type="submit"
              
            >
              <span > Submit </span>
            </button>
          </div>
        </Form>
      </div>
    </template>

<script lang="ts">
export default defineComponent({
  name: "sign-up",
  data() {
    return {
      givenName: "",
      familyName: "",
      companyName: "",
      email: "",
      password: "",
      password_confirmation: "",
    };
  },
  setup() {
    const store = useStore();
    const router = useRouter();

    const submitButton = ref<HTMLButtonElement | null>(null);

    const onSubmitRegister = async (values) => {
      // Clear existing errors
      store.dispatch(Actions.LOGOUT);

      // eslint-disable-next-line
      submitButton.value!.disabled = true;

      // Activate indicator
      submitButton.value?.setAttribute("data-kt-indicator", "on");
      const data = {
        givenName: values.givenName,
        familyName: values.familyName,
        companyName: values.companyName,
        email: values.email,
        password: values.password,
        confirmPassword: values.confirmPassword,
      };
      // Send login request
      await store.dispatch(Actions.REGISTER, data);

      const [errorName] = Object.keys(store.getters.getErrors);
      const error = store.getters.getErrors[errorName];

      if (!error) {
     .then(function () {
          // Go to page after successfully register
          router.push({ name: "verifyCode" });
        });
      } else {}

      submitButton.value?.removeAttribute("data-kt-indicator");
      // eslint-disable-next-line
      submitButton.value!.disabled = false;
    };

    return {
      registration,
      onSubmitRegister,
      submitButton,
    };
  },
});
</script>

CodePudding user response：

In SignUp.vue, you can use

router.push({ name: 'verifyCode', query: { secureToken: 'abc' } })

And in the receiving component, you can use

const route = useRoute() // route here, not router
route.query.secureToken

Router is used to navigate, while route is used to access some info regarding your path/query/etc...

CodePudding user response：

As @kissu, mentioned On SignUp page, you can use $router to route to the verifyCode page with query equal to email

router.push({ name: "verifyCode", query: { email: values.email } });

And in VerifyCode page you can get the query value with

const route = useRoute();
//log the email value.
console.log(route.query.email)

FULL EXAMPLE OF CODE.

VerifyCode.vue

<template>
    <Form
      @submit="onVerifyCode"
      id="kt_verifyCode_form"
    >
      <div >
        <label >Code</label>
        <Field
          
          type="text"
          name="code"
          autocomplete="off"
          v-model="code"
        />
      </div>
      <div >
        <button
          id="kt_verifyCode_submit"
          ref="submitButton"
          type="submit"
          
        >
          <span > Submit </span>
        </button>
      </div>
    </Form>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: "verifyCode",
  data() {
    return {
      code: "",
    };
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    // log the email value.
    console.log(router.query.email)
    const onVerifyCode = async (values) => {
      // Clear existing errors
      store.dispatch(Actions.LOGOUT);

      // eslint-disable-next-line
      submitButton.value!.disabled = true;

      // Activate indicator
      submitButton.value?.setAttribute("data-kt-indicator", "on");
      const data = {
        code: values.code,
      };
      // Send verify code request
      await store.dispatch(Actions.VERIFY_CODE, data);
      const [errorName] = Object.keys(store.getters.getErrors);
      const error = store.getters.getErrors[errorName];

      if (!error) {.then(function () {
          // Go to page after successfully login
          router.push({ name: "projects" });
        });
      } else {}

      submitButton.value?.removeAttribute("data-kt-indicator");
      // eslint-disable-next-line
      submitButton.value!.disabled = false;
    };

    return {
      verifyCode,
      onVerifyCode,
      submitButton,
    };
  },
});
</script>

SignUp.vue

    <template>
        <Form
          @submit="onSubmitRegister"
          id="kt_login_signup_form"
        >
          <!--begin::Input group-->
          <div >
            <!--begin::Col-->
            <div >
              <label >First Name</label>
              <Field
                
                type="text"
                placeholder=""
                name="givenName"
                autocomplete="off"
                v-model="givenName"
              />
            </div>
            <!--end::Col-->
    
            <!--begin::Col-->
            <div >
              <label >Last Name</label>
              <Field
                
                type="text"
                placeholder=""
                name="familyName"
                autocomplete="off"
                v-model="familyName"
              />
            </div>
            <!--end::Col-->
          </div>
          <!--end::Input group-->
          <!--begin::Input group-->
          <div >
            <label >Company</label>
            <Field
              
              type="text"
              placeholder=""
              name="companyName"
              autocomplete="off"
              v-model="companyName"
            />
          </div>
          <!--end::Input group-->
          <!--begin::Input group-->
          <div >
            <label >Email</label>
            <Field
              
              type="email"
              placeholder=""
              name="email"
              autocomplete="off"
              v-model="email"
            />
          </div>
          <!--end::Input group-->
    
          <!--begin::Input group-->
          <div  data-kt-password-meter="true">
            <!--begin::Wrapper-->
            <div >
              <!--begin::Label-->
              <label > Password </label>
              <!--end::Label-->
    
              <!--begin::Input wrapper-->
              <div >
                <Field
                  
                  type="password"
                  placeholder=""
                  name="password"
                  autocomplete="off"
                  v-model="password"
                />
              </div>
              <!--end::Input wrapper-->
            </div>
            <!--end::Wrapper-->
          </div>
          <!--end::Input group--->
    
          <!--begin::Input group-->
          <div >
            <label 
              >Confirm Password</label
            >
            <Field
              
              type="password"
              placeholder=""
              name="password_confirmation"
              autocomplete="off"
              v-model="password_confirmation"
            />
          </div>
          <!--end::Input group-->
    
          <!--begin::Actions-->
          <div >
            <button
              id="kt_sign_up_submit"
              ref="submitButton"
              type="submit"
              
            >
              <span > Submit </span>
            </button>
          </div>
        </Form>
      </div>
    </template>

<script lang="ts">
export default defineComponent({
  name: "sign-up",
  data() {
    return {
      givenName: "",
      familyName: "",
      companyName: "",
      email: "",
      password: "",
      password_confirmation: "",
    };
  },
  setup() {
    const store = useStore();
    const router = useRouter();

    const submitButton = ref<HTMLButtonElement | null>(null);

    const onSubmitRegister = async (values) => {
      // Clear existing errors
      store.dispatch(Actions.LOGOUT);

      // eslint-disable-next-line
      submitButton.value!.disabled = true;

      // Activate indicator
      submitButton.value?.setAttribute("data-kt-indicator", "on");
      const data = {
        givenName: values.givenName,
        familyName: values.familyName,
        companyName: values.companyName,
        email: values.email,
        password: values.password,
        confirmPassword: values.confirmPassword,
      };
      // Send login request
      await store.dispatch(Actions.REGISTER, data);

      const [errorName] = Object.keys(store.getters.getErrors);
      const error = store.getters.getErrors[errorName];

      if (!error) {
     .then(function () {
          // Go to page after successfully register
          router.push({ name: "verifyCode", query: { email: values.email } });
        });
      } else {}

      submitButton.value?.removeAttribute("data-kt-indicator");
      // eslint-disable-next-line
      submitButton.value!.disabled = false;
    };

    return {
      registration,
      onSubmitRegister,
      submitButton,
    };
  },
});
</script>