Finally fixed conditional rendering bug of submission-list

frontend/src/components/Login.vue

@@ -56,7 +56,6 @@
       submit () {
         this.getJWTToken(this.credentials).then(() => {
           this.$router.push('/student/')
-          this.getExamModule()
           this.getUserRole()
         }).catch(() => {
           this.error = this.$store.state.error

frontend/src/components/student/StudentPage.vue

@@ -3,12 +3,14 @@
       <v-layout justify center>
         <v-flex md3>
           <h2>Exam Overview</h2>
-          <exam-information v-if="doneLoading" :exam="exam"></exam-information>
-        </v-flex>
-        <v-flex md7 offset-md1>
-          <h2>Submissions of {{ studentName }}</h2>
-          <submission-list v-if="doneLoading" :submissions="submissions"></submission-list>
+          <exam-information v-if="!loading" :exam="exam"></exam-information>
         </v-flex>
+        <template v-if="!loading">
+          <v-flex md7 offset-md1>
+            <h2>Submissions of {{ studentName }}</h2>
+            <submission-list :submissions="submissions"></submission-list>
+          </v-flex>
+        </template>
       </v-layout>
     </v-container>
 </template>
@@ -26,19 +28,15 @@
       SubmissionList,
       StudentLayout},
     name: 'student-page',
-    data () {
-      return {
-        doneLoading: false
-      }
-    },
     created: function () {
-      this.$store.dispatch('getStudentData').then(() => { this.doneLoading = true })
+      this.$store.dispatch('getStudentData')
     },
     computed: {
       ...mapState({
         studentName: state => state.studentPage.studentName,
         exam: state => state.studentPage.exam,
-        submissions: state => state.studentPage.submissions
+        submissions: state => state.studentPage.submissions,
+        loading: state => state.studentPage.loading
       })
     }
   }

frontend/src/components/student/SubmissionList.vue

@@ -51,6 +51,7 @@
     props: ['submissions'],
     computed: {
       sumScore () {
+        console.log(this.submissions)
         return this.submissions.map(a => a.score).reduce((a, b) => a + b)
       },
       sumFullScore () {

frontend/src/store/modules/student-page.js

@@ -5,7 +5,8 @@ const studentPage = {
     studentName: '',
     exam: {},
     submissionTypes: [],
-    submissions: []
+    submissions: [],
+    loading: true
   },
   mutations: {
     'SET_STUDENT_NAME': function (state, name) {
@@ -19,15 +20,21 @@ const studentPage = {
     },
     'SET_SUBMISSIONS': function (state, submissions) {
       state.submissions = submissions
+    },
+    'SET_LOADING': function (state, loading) {
+      state.loading = loading
     }
   },
   actions: {
+
     getStudentData (context) {
+      context.commit('SET_LOADING', true)
       ax.get('api/student-page/').then(response => {
         const data = response.data
         context.commit('SET_STUDENT_NAME', data.name)
         context.commit('SET_EXAM', data.exam)
         context.commit('SET_SUBMISSIONS', data.submissions)
+        context.commit('SET_LOADING', false)
       })
     }
   }