Page not redirect to page after press submit button

i create a form in vue where two submit button are used. i want both are redirected to different pages. but non of these are redirected to any page but form data are pass and account are created.

if (response.data.success == true) {
             if (this.saveClicked) {
              self.user_msg = "Member details updated successfully.";
              localStorage.setItem("new_user", "true");
              self.login_user();
              router.push({ path: '/member/member-questionnaire' });

            } else {
              // self.showModal=true
               router.push('/questionnaire');

            }
          } else {
            if (response.data.data == null) {
              self.error_msg = response.data.message;
            } else {
              let first_error_key = Object.keys(response.data.data)[0];
              self.error_msg = response.data.data[first_error_key][0];
            }
          }

<div class="container-login100-form-btn m-t-20 m-b-10">

            <div
              class="wrap-login100-form-btn"
              style="z-index: 0"
              
            >

              <div class="login100-form-bgbtn"></div>
              <button class="login100-form-btn" value="save" @click="saveClicked = true" name="submit">Submit</button>
            </div>
          </div>

          
          <div class="container-login100-form-btn m-t-10 m-b-10">
            <p
              
              class="know_your_risk_label text-secondary"
            >
              <button class="login100-form-btn know-risk-text text-black" @click="saveClicked = false" value="save" name="risk">Know your risk</button>
            </p>
          </div>

LaryAI

3 years ago

Level 58

Based on the code provided, it seems that the issue is not with the Vue form itself, but with the router not properly redirecting to the desired pages after the form is submitted.

One possible solution is to make sure that the router is properly imported and initialized in the Vue component that contains the form. Here's an example of how this can be done:

<template>
  <div>
    <!-- form code here -->
  </div>
</template>

<script>
import router from '@/router' // import the router from the router file

export default {
  data() {
    return {
      saveClicked: false,
      // other data properties here
    }
  },
  methods: {
    onSubmit() {
      // form submission code here
      if (response.data.success == true) {
        if (this.saveClicked) {
          // redirect to member questionnaire page
          router.push({ path: '/member/member-questionnaire' });
        } else {
          // redirect to questionnaire page
          router.push('/questionnaire');
        }
      } else {
        // error handling code here
      }
    }
  }
}
</script>

In this example, we import the router from the router file and initialize it in the Vue component. Then, in the onSubmit method, we use the router.push method to redirect to the desired pages based on the value of saveClicked.

Make sure to adjust the code to fit your specific use case and file structure.

Please or to participate in this conversation.