solved bug regarding routing in CourseDetails.vue

Amber Dev
1 parent 1eaabc5a2d
Showing 3 changed files with 7 additions and 5 deletions Show diff stats
src/App.vue
src/Services/GetApis.js
src/pages/Dashboard/CourseDetails.vue
@@ -8,7 +8,7 @@
           <div class="page-wrapper">
             <!-- Header toolbar with Seacrh -->
             <app-toolbar class="app--toolbar"></app-toolbar>
-            <router-view></router-view>
+            <router-view :key="$route.fullPath"></router-view>
           </div>
           <!-- App Footer -->
         </v-content>
@@ -33,7 +33,6 @@ export default {
                     studentId: params.studentId
                 })
                 this.courseData = response.data.data;
-                console.log("coursesData - ", this.courseData)
             } catch (error) {
                 console.log("error in getStudentCourses - ", error.message)
             }
@@ -148,9 +148,10 @@ export default {
  
       /* If the response is null then dont route */
       if (response.data.data.length > 0) {
-        this.$router.push({
-          name: "Course Details",
-          query: { courseId: courseId }
+        // REQUIRED TO WAIT FOR UPDATE CYCLE
+        this.$nextTick(() => {
+          // this.filters.locEmitted = "emitted";
+          this.$router.push({ query: { courseId: courseId } });
         });
       } else {
         this.seeSnackbar("No Data Available", "warning");
@@ -158,11 +159,13 @@ export default {
     }
   },
   async created() {
+    console.log("its working");
     /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
     let response = await this.getParticularCourseDetail(
       this.$route.query.courseId
     );
     this.courseDetails = response.data.data;
+    console.log("its working courseDetails - ", this.courseDetails);
  
     /* getStudentCourses - to get courseData - defined in GetApis.js*/
     await this.getStudentCourses({
...	...	@@ -8,7 +8,7 @@
8	8	<div class="page-wrapper">
9	9	<!-- Header toolbar with Seacrh -->
10	10	<app-toolbar class="app--toolbar"></app-toolbar>
11		- <router-view></router-view>
	11	+ <router-view :key="$route.fullPath"></router-view>
12	12	</div>
13	13	<!-- App Footer -->
14	14	</v-content>
...	...
...	...	@@ -33,7 +33,6 @@ export default {
33	33	studentId: params.studentId
34	34	})
35	35	this.courseData = response.data.data;
36		- console.log("coursesData - ", this.courseData)
37	36	} catch (error) {
38	37	console.log("error in getStudentCourses - ", error.message)
39	38	}
...	...
...	...	@@ -148,9 +148,10 @@ export default {
148	148
149	149	/* If the response is null then dont route */
150	150	if (response.data.data.length > 0) {
151		- this.$router.push({
152		- name: "Course Details",
153		- query: { courseId: courseId }
	151	+ // REQUIRED TO WAIT FOR UPDATE CYCLE
	152	+ this.$nextTick(() => {
	153	+ // this.filters.locEmitted = "emitted";
	154	+ this.$router.push({ query: { courseId: courseId } });
154	155	});
155	156	} else {
156	157	this.seeSnackbar("No Data Available", "warning");
...	...	@@ -158,11 +159,13 @@ export default {
158	159	}
159	160	},
160	161	async created() {
	162	+ console.log("its working");
161	163	/* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
162	164	let response = await this.getParticularCourseDetail(
163	165	this.$route.query.courseId
164	166	);
165	167	this.courseDetails = response.data.data;
	168	+ console.log("its working courseDetails - ", this.courseDetails);
166	169
167	170	/* getStudentCourses - to get courseData - defined in GetApis.js*/
168	171	await this.getStudentCourses({
...	...