refact todo display and edit option

resources/js/views/ToDoLists/ToDoListShow.vue

@@ -40,10 +40,11 @@
                     class='drag-el todo flex justify-between items-center bg-white rounded-sm mb-1 px-2 py-1' >
                     <div class="flex flex-1">
                         <svg-vue icon="draggable" class="w-4 block mr-2 cursor-move" />
-                        <span v-bind:class="{ 'line-through' : toDo.data.attributes.data.checked_at }">{{ toDo.data.attributes.data.name }}</span>
-                    </div>
-                    <div class="flex">
-                        <svg-vue icon="edit" @click="edit = !edit" class="edit-icon z-10 w-4 block cursor-pointer mr-1" />
+                        <ToDo :name="toDo.data.attributes.data.name"
+                              :checked="toDo.data.attributes.data.checked_at"
+                              :id-list="toDoList.data.to_do_list_id"
+                              :id-to-do="toDo.data.to_do_id"
+                              class="flex-1 bg-blue" />
                         <input type="checkbox" :checked="toDo.data.attributes.data.checked_at" @click="checked(toDo, index)">
                         <span @click="deleteToDo(toDo, index)" class="cursor-pointer ml-2 font-bold">X</span>
                     </div>
@@ -51,7 +52,7 @@
 
             </ul>
             <div class="flex items-center m-2">
-                <input type="text" v-model="name" @keydown.enter="addToDo" class="p-1 rounded-sm -ml-1">
+                <input type="text" v-model="toDoName" @keydown.enter="addToDo" class="p-1 rounded-sm -ml-1">
                 <button class="btn-primary ml-1 py-1" @click="addToDo">ADD</button>
             </div>
         </div>
@@ -59,16 +60,20 @@
 </template>
 
 <script>
+import ToDo from './ToDo'
 //https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/
 //https://jsfiddle.net/jf9nrtds/
 
 export default {
     name: 'ToDoListShow',
+    components: {
+        ToDo
+    },
     data () {
         return {
             toDoList: null,
             loading: true,
-            name: '',
+            toDoName: '',
             errors: null,
             modal: false,
             listName: '',
@@ -121,11 +126,11 @@ export default {
             })
         },
         addToDo: function () {
-            if(this.name.length >= 3) {
+            if(this.toDoName.length >= 3) {
                 // eslint-disable-next-line no-undef
-                axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.name})
+                axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.toDoName})
                     .then(res => {
-                        this.name = ''
+                        this.toDoName = ''
                         this.toDoList.data.attributes.data.to_dos.data.push(res.data)
                     })
                     .catch(errorRes => {