register page not redirecting to the homeowner-dashboard when clicking on 'register'

[remoteconn-7891]

This is a repost. But the register page is not redirecting to the homeowner-dashboard page when I click on the register button. When clicking on it, literally nothing happens.

I inspected the Console and all it shows is this

Payload: 
Object { name: "don jacob", email: "coreyjames775@aol.com", password: "Donuts!12", password_confirmation: "Donuts!12" }
RegisterPage.vue:112:16

So it shows the registration credentials in the Console. Also in the network tabs, all of the responses with GET methods have a status code of '200', possibly suggesting that the API call is working.

When I posted this question about a week ago, I initially suspected that this was a backend (Django) API endpoint specific error. However, I finished running 3 unit tests for the login, registration and homeowner profile (the backend api to homeowner-dashboard) API endpoints with no errors.

Here are the tests results for all 3 unit tests

  show_sunset_warning()
System check identified no issues (0 silenced).
...
----------------------------------------------------------------------
Ran 3 tests in 1.166s

OK
Destroying test database for alias 'default'...

Therefore this is clearly a VueJS issue, not a Django one. Here are some important VueJS files:

RegisterPage.vue

<template>
    <layout-div>
      <div class="row justify-content-md-center mt-5">
        <div class="col-4">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title mb-4">Register</h5>
              <form>
                <div class="mb-3">
                  <label htmlFor="name" class="form-label">Name</label>
                  <input
                    type="text"
                    class="form-control"
                    id="name"
                    name="name"
                    v-model="name"
                  />
                  <div v-if="validationErrors.name" class="flex flex-col">
                    <small class="text-danger">{{ validationErrors?.name[0] }}</small>
                  </div>
                </div>
                <div class="mb-3">
                  <label htmlFor="email" class="form-label">Email</label>
                  <input
                    type="email"
                    class="form-control"
                    id="email"
                    name="email"
                    v-model="email"
                  />
                  <div v-if="validationErrors.email" class="flex flex-col">
                    <small class="text-danger">{{ validationErrors?.email[0] }}</small>
                  </div>
                </div>
                <div class="mb-3">
                  <label htmlFor="password" class="form-label">Password</label>
                  <input
                    type="password"
                    class="form-control"
                    id="password"
                    name="password"
                    v-model="password"
                  />
                  <div v-if="validationErrors.password" class="flex flex-col">
                    <small class="text-danger">{{ validationErrors?.password[0] }}</small>
                  </div>
                </div>
                <div class="mb-3">
                  <label htmlFor="confirm_password">Confirm password</label>
                  <input
                    type="password"
                    class="form-control"
                    id="confirm_password"
                    name="confirm_password"
                    v-model="confirmPassword"
                  />
                </div>
                <div class="d-grid gap-2">
                   <button
                    :disabled="isSubmitting"
                    type="button"
                    @click="registerAction">Register</button>
                  <p class="text-center">
                    Already have an account
                    <a href="#" @click.prevent="redirectToLogin">Sign in</a>
                  </p>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </layout-div>
  </template>
  
  <script>
  import axios from 'axios';
  import LayoutDiv from '../LayoutDiv.vue';
  
  export default {
    name: 'RegisterPage',
    components: {
      LayoutDiv,
    },
    data() {
      return {
        name: '',
        email: '',
        password: '',
        confirmPassword: '',
        validationErrors: {},
        isSubmitting: false,
      };
    },
    created() {
      this.isAuthenticated = !!localStorage.getItem('access_token');
      if (this.isAuthenticated) {
        this.$router.push('/homeowner-dashboard');
      }
    },
    methods: {
      registerAction() {
        this.isSubmitting = true;
        const payload = {
          name: this.name,
          email: this.email,
          password: this.password,
          password_confirmation: this.confirmPassword,

        };

        console.log("Payload:", payload);

        //fetch("https://jsonplaceholder.typicode.com/todos/")
        //.then(r => r.json())
        //.then(console.log)
  
        axios
          .post('/api/register', payload)
          .then((response) => {
            this.isSubmitting = false;
            //localStorage.setItem('access_token', response.data.access_token);
          //this.$router.push({ name: 'homeownerDashboard'});
          console.log("Registration successful!");
          })
          .catch((error) => {
            this.isSubmitting = false;
            console.error("Error:", error);
            if (error.response) {
                console.error("Error Response Data:", error.response.data);
                console.error("Error Response Status:", error.response.status);
                console.error("Error Response Headers:", error.response.headers);
            }
          });
      },
      redirectToLogin() {
        this.$router.push('/login');
      },
    },
  };
  </script>

HomeownerDashboard.vue

<script setup lang="ts">

</script>

<template>
  <LayoutDiv>
    <div class="row justify-content-md-center mt-5">
      <div class="col-10">
        <div class="card">
          <div class="card-header">
            <h5 class="card-title">Homeowner Dashboard</h5>
          </div>
          <div v-if="dashboardData">
            <p><strong>Welcome, {{  dashboardData.name }}!</strong></p>
            <p>Your current location: {{  dashboardData.city }}, {{ dashboardData.state }}, {{ dashboardData.zip }}, {{ dashboardData.profilePic }}</p>
            <div>
              <img
                v-if="dashboardData.profilePic"
                :src="dashboardData.profilePic"
                alt="Profile Picture"
                class="profile-pic"
              />
              <p v-else>No profile picture available.</p>
            </div>
            <h6 class="mt-4">Pending Service Requests</h6>
            <ul v-if="dashboardData.pendingRequests.length"> 
              <li v-for="(request, index) in dashboardData.pendingRequests" :key="index">
                {{  request.description  }} - {{ request.date }}
              </li>
            </ul>
            <p v-else>No pending service requests.</p>

            <h6 class="mt-4">Your Saved Arborists</h6>
            <ul v-if="dashboardData.savedArborists.length">
              <li v-for="(arborist, index) in dashboardData.savedArborists" :key="index">
                {{ arborist.name }} ({{ arborist.companyName }})
              </li>
            </ul>
            <p v-else>No saved arborists yet.</p>

            <button class="btn btn-primary mt-3" @click="viewSearchArborists">Find Arborists</button>
          </div>
          <div v-else>
            <p>Loading Dashboard...</p>
          </div>
        </div>
      </div>
    </div>
  </LayoutDiv>
</template>
  
<script lang="ts">
import axios from 'axios';
import LayoutDiv from '../LayoutDiv.vue';
import { defineComponent, DefineComponent } from 'vue';
import { error } from 'console';

interface DashboardData {
  name: string;
  city: string;
  state: string;
  zip: string;
  profilePic: string;
  pendingRequests: { description: string; date: string }[];
  savedArborists: { name: string; companyName: string }[];
}

export default defineComponent({
  name: 'HomeownerDashboard',
  components: {
    LayoutDiv,
  },
  data() {
    return {
      dashboardData: null as DashboardData | null,
    };
  },
  created() {
    this.fetchDashboardData();
  },
  methods: {
    fetchDashboardData() {
      axios
        .get('homeowner/profile/', {
          headers: { Authorization: 'Bearer ' + localStorage.getItem('token') },
        })
        .then((response) => {
          this.dashboardData = response.data;
        })
        .catch((error) => {
          console.error('Error fetching dashboard data:', error);
        });
    },
    viewSearchArborists() {
      this.$router.push('/search');
    },
  },
});
</script>

<style scoped>
.card-header {
  background-color: #f8f9fa;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 0.5rem;
}

button {
  display: block;
  margin: 0 auto;
}
</style>

Finally index.ts

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/pages/Home.vue';
import LoginPage from '../components/pages/LoginPage.vue';
import RegisterPage from '../components/pages/RegisterPage.vue';
import HomeownerDashboard from '../components/pages/HomeownerDashboard.vue';
import SearchArborists from '../components/pages/SearchArborists.vue';




const routes = [
  { path: '/', component: Home }, // Redirect `/` to `/login`
  { path: '/login', component: LoginPage },
  { path: '/register', component: RegisterPage },
  { path: '/homeowner-dashboard', component: HomeownerDashboard, name: 'homeownerDashboard'},
  { path: '/search', component: SearchArborists },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});


export default router;

PS I added the url path for my homeowner profile api endpoint homeowner/profile/. Not sure if this was the correct move or not. I think the API call is working, but there is possibly something in my RegisterPage.vue or HomeownerDashboard.vue that needs to be fixed.

I really think it would be easier if you viewed my Github profile, that way you can view all of my files. My Github repo link is https://github.com/remoteconn-7891/FrontendArborfindr. Please I need help, I know that this is a simple VueJS fix.