title: Why is my IF function not getting recognized?
body: <p>I'm working in a Vue 3 project.</p>
  <p>I've created a store specifically for my signup component with Pinia. Inside the store's action, I've written a function that makes a post request to the backend and is expected to navigate to the following page in case the result status gotten from the response is &quot;201&quot;.</p>
  <p>But my problem now is that it doesn't get into my &quot;if function&quot; whereas I have done a log of the result status just before the &quot;if function&quot; which prints out &quot;201&quot; quite alright and hence it's normally suppose to execute the router.push statement written in my &quot;if&quot; function.</p>
  <p>I've tried logging within the if and it prints out in the console. But then the <code>router.push</code> statement doesn't get executed I don't know why. I've done a simple button that calls a function in the store that simply routes using the same <code>router.push</code> and it works fine. So what could really be going on?</p>
  <p>What could possibly be the problem I'm making if I may ask? Below are the code segments.</p>
  <p>&lt;&lt;SignupStore.js&gt;&gt;</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { defineStore } from "pinia";
  import axios from "axios";
  
  export const SignupStore = defineStore("signup", {
    state: () =&gt; ({
      fullName: "",
      dob: "",
      email: "",
      password: "",
      confirmPassword: "",
      gender: "",
      program: "",
      genderOptions: ["Male", "Female"],
      degreePrograms: ["Degree program", "HND program", "Masters program"],
      isSignupCorrect: false,
    }),
  
    actions: {
      async signup() {
        let dobx = new Date(this.dob).toISOString().substring(0, 10);
        let genderx = this.gender.substring(0, 1);
        let programx = this.program;
        if (programx == "Degree program") {
          programx = "De";
        } else if (programx == "HND program") {
          programx = "Hn";
        } else {
          programx = "Ms";
        }
  
        await axios
          .post("register/", {
            full_name: this.fullName,
            email: this.email,
            password: this.password,
            gender: genderx,
            dob: dobx,
            program: programx,
          })
          .then((response) =&gt; {
              console.log('response status is ' + response.status)
              if (response.status == 201) {
                  router.push({ name: "AdmissionDashboard" });
                }
          })
          .catch((error) =&gt; {
            if (error.response) {
              console.log("signup error traced");
            }
          });
      },
    },
  });</code></pre>
  </div>
  </div>
  </p>
  <p>&lt;&gt;</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script setup&gt;
  import NavBar from "../components/NavBar.vue";
  import { ref } from "@vue/reactivity";
  import axios from "axios";
  
  import { SignupStore } from "../Stores/SignupStore";
  const user = SignupStore()</code></pre>
  </div>
  </div>
  </p>
  <p>&lt;&gt;</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;va-button
              :disabled="isDisabled"
              class="submit-btn"
              color="#03c460"
              size="large"
              @click="user.signup"
              &gt;Create account&lt;/va-button
            &gt;</code></pre>
  </div>
  </div>
  </p>
  <p>&lt;&lt;routes.js&gt;&gt;</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { createRouter, createWebHistory } from "vue-router";
  import SignupPage from '../Views/SignupPage.vue'
  import LandingPage from '../Views/LandingPage.vue'
  import AdmissionInfo from '../Views/AdmissionInfo.vue'
  import SignInPage from '../Views/SignInPage.vue'
  import PlatformCharges from '../Views/PlatformServiceCharge.vue'
  import AdmissionDashboard from '../Views/AdmissionDashboard.vue'
  import ApplicationPage from '../Views/ApplicationPage.vue'
  import Test from '../Views/test.vue'
  
  const routes = [
      {
          path: '/signup',
          name: 'SignupPage',
          component: SignupPage
      },
      {
          path: '/test',
          name: 'test',
          component: Test
      },
      {
          path: '/',
          name: 'LandingPage',
          component: LandingPage
      },
      {
          path: '/admission-info',
          name: 'AdmissionInfo',
          component: AdmissionInfo
      },
      {
          path: '/sign-in',
          name: 'SignInPage',
          component: SignInPage
      },
      {
          path: '/platform-charges',
          name: 'PlatformCharges',
          component: PlatformCharges
      },
      {
          path: '/admission-dashboard',
          name: 'AdmissionDashboard',
          component: AdmissionDashboard
      },
      {
          path: '/app-page',
          name: 'ApplicationPage',
          component: ApplicationPage
      },
      
  ]
  
  const router = createRouter({
      history: createWebHistory(),
      routes
  })
  
  export default router</code></pre>
  </div>
  </div>
  </p>