todo front in work

resources/js/views/ToDoLists/ToDoListIndex.vue

@@ -15,17 +15,24 @@
             <a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a>
         </div>
         <Loader v-if="loading" />
+        <div v-else>
+            <div v-if="toDoLists.length < 1">No List Yet</div>
+            <div v-else v-for="toDoList in toDoLists">
+                <ToDoList :to-do-list="toDoList" />
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
     import Loader from "../../components/Loader";
     import InputField from "../../components/InputField";
+    import ToDoList from "./ToDoList";
 
     export default {
         name: "ToDoListIndex",
         components: {
-            Loader, InputField
+            Loader, InputField, ToDoList
         },
         data: function () {
             return {
@@ -38,8 +45,8 @@
         },
         mounted() {
             axios.get('/api/to-do-lists')
-                .then(response => {
-                    this.toDoLists = response.data.data
+                .then(res => {
+                    this.toDoLists = res.data.data
                     this.loading = false
                 })
                 .catch(errorRes => {
@@ -56,7 +63,7 @@
                         console.log(res)
                         this.modal = false
                         this.name = ''
-                        // this.$router.push('/memos')
+                        this.toDoLists.push(res.data)
                     })
                     .catch(errorRes => {
                         console.log('Internal Error, Unable to delete contact.' + errorRes)