fix checked input status after move

resources/js/views/ToDoLists/ToDo.vue

@@ -42,6 +42,7 @@ export default {
     },
     data () {
         return {
+            id: this.toDo.data.to_do_id,
             edit: false,
             checked: !!(this.toDo.data.attributes.data.checked_at),
         }
@@ -52,7 +53,6 @@ export default {
             axios.patch('/api/to-do-lists/' + this.idList + '/to-do/' + this.toDo.data.to_do_id, {name: this.toDo.data.attributes.data.name })
                 .then(() => {
                     this.edit = false
-                    //this.toDoList.data.attributes.data.name = this.listName
                 })
                 .catch(errorRes => {
                     console.log('Internal Error, Unable to delete list.' + errorRes)
@@ -61,10 +61,10 @@ export default {
     },
     watch: {
         checked: function () {
+            if(event && event.type === 'click') {
                 // eslint-disable-next-line no-undef
                 axios.patch('/api/to-do-lists/' + this.idList + '/to-do/' + this.toDo.data.to_do_id + '/check')
                     .then(res => {
-                    // this.toDoList.data.attributes.data.to_dos.data[position].data.attributes.data.checked_at = res.data.data.attributes.data.checked_at
                         this.toDo.data.attributes.data.checked_at = res.data.data.attributes.data.checked_at
                         this.checked = !!(res.data.data.attributes.data.checked_at)
                     })
@@ -72,6 +72,12 @@ export default {
                         console.log('Internal Error, Unable to delete contact.' + errorRes)
                     })
             }
+        },
+        toDo: function () {
+            if(this.checked !== !!(this.toDo.data.attributes.data.checked_at)) {
+                this.checked = !!(this.toDo.data.attributes.data.checked_at)
+            }
+        }
     }
 }
 </script>

resources/js/views/ToDoLists/ToDoListShow.vue

@@ -43,6 +43,7 @@
                         <svg-vue icon="draggable" class="w-4 block mr-2 cursor-move" />
                         <ToDo :to-do="toDo"
                               :id-list="toDoList.data.to_do_list_id"
+                              ref="toDo"
                               class="flex-1 bg-blue" />
                         <span @click="deleteToDo(toDo, index)" class="cursor-pointer ml-2 font-bold edit-icon flex items-center">
                             <svg-vue icon="close" class="w-4" />
@@ -87,7 +88,7 @@ export default {
                 this.toDoList = res.data
                 this.loading = false
                 this.listName = res.data.data.attributes.data.name
-                this.reorderList()
+                this.sortList()
             })
             .catch(errorRes => {
                 this.loading = false
@@ -120,11 +121,14 @@ export default {
                     console.log('Internal Error, Unable to delete contact.' + errorRes)
                 })
         },
-        reorderList() {
+        sortList() {
             this.toDoList.data.attributes.data.to_dos.data.sort(function(a, b) {
                 return a.data.attributes.data.order - b.data.attributes.data.order
             })
         },
+        reorderList() {
+            this.sortList()
+        },
         addToDo: function () {
             if(this.toDoName.length >= 3) {
                 // eslint-disable-next-line no-undef