13.4 Add a Sort Dropdown Component to the Page

src/components/Tasks/Tools/Sort.vue

@@ -0,0 +1,30 @@
+<template>
+  <q-select
+    filled
+    v-model="model"
+    class="col q-ml-sm"
+    :options="options"
+    lable="Sort by"
+    stack-label
+  />
+</template>
+
+<script>
+export default {
+  name: 'Sort',
+  data () {
+    return {
+      model: null,
+      options: [
+        'Name', 'Due Date', 'Due Time'
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .q-select {
+    flex: 0 0 112px;
+  }
+</style>

src/pages/PageTodo.vue

@@ -3,6 +3,7 @@
 
     <div class="row q-mb-lg">
       <search />
+      <sort />
     </div>
 
     <p
@@ -44,6 +45,7 @@ import noTasks from 'components/Tasks/NoTasks.vue'
 import tasksCompleted from 'components/Tasks/TasksCompleted.vue'
 import addTask from 'components/Tasks/Modals/AddTask.vue'
 import search from 'components/Tasks/Tools/Search.vue'
+import sort from 'components/Tasks/Tools/Sort.vue'
 
 export default {
   name: 'PageTodo',
@@ -52,7 +54,8 @@ export default {
     tasksCompleted,
     addTask,
     noTasks,
-    search
+    search,
+    sort
   },
   data () {
     return {