15.05 Format the Time with a Computed Property

src/components/Tasks/Task.vue

@@ -39,7 +39,7 @@
           <q-item-label
             class="row justify-end"
             caption>
-            <small>{{ task.dueTime }}</small>
+            <small>{{ taskDueTime }}</small>
           </q-item-label>
         </div>
       </div>
@@ -72,7 +72,7 @@
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex'
+import { mapState, mapActions, mapGetters } from 'vuex'
 import editTask from 'components/Tasks/Modals/EditTask.vue'
 import { date } from 'quasar'
 const { formatDate } = date
@@ -116,7 +116,17 @@ export default {
     }
   },
   computed: {
-    ...mapState('tasks', ['search'])
+    ...mapState('tasks', ['search']),
+    ...mapGetters('settings', ['settings']),
+    taskDueTime () {
+      if (this.settings.show12HourTimeFormat) {
+        return formatDate(
+          this.task.dueDate + ' ' +
+          this.task.dueTime, 'h:mma')
+      }
+      return this.task.dueTime
+    }
+
   },
   methods: {
     ...mapActions('tasks', ['updateTask', 'deleteTask']),