todo front in work

resources/js/views/ToDoLists/ToDoList.vue

@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <h1>{{ toDoList.data.attributes.data.name }}</h1>
+        <div v-if="toDoList.data.attributes.data.to_dos.to_dos_count < 1">
+            ------- no to Do -------
+        </div>
+        <div v-else v-for="toDo in toDoList.data.attributes.data.to_dos.data">{{ toDo.data.attributes.data.name }}</div>
+        <div>
+            <InputField name="name" classes="inline" placeholder="New To Do" required @update:field="name = $event" :errors="errors" />
+            <button class="btn-primary" @click="addToDo">ADD</button>
+        </div>
+    </div>
+</template>
+
+<script>
+    import InputField from "../../components/InputField";
+
+    export default {
+        name: "ToDoList",
+        components: {
+            InputField
+        },
+        data: function () {
+            return {
+                name: '',
+                errors: null,
+            }
+        },
+        props: {
+            toDoList: {
+                type: Object,
+                require: true
+            }
+        },
+        methods: {
+            addToDo: function () {
+                axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.name})
+                    .then(res => {
+                        console.log(res.data.data)
+                        this.modal = false
+                        this.name = ''
+                        this.toDoList.data.attributes.data.to_dos.data.push(res.data)
+                    })
+                    .catch(errorRes => {
+                        console.log('Internal Error, Unable to delete contact.' + errorRes)
+                    })
+            }
+        }
+    }
+</script>

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)