work on todos front

resources/js/views/ToDoLists/ToDo.vue

@@ -0,0 +1,53 @@
+<template>
+    <li class="todo flex justify-between items-center bg-white rounded mb-1 px-2 py-1"
+        >
+        <div class="flex flex-1" draggable="true">
+            <svg-vue icon="draggable" class="w-4 block mr-2 cursor-move" />
+            {{ toDo.data.attributes.data.name }}
+        </div>
+        <div class="flex">
+            <svg-vue icon="edit" @click="edit = !edit" class="edit-icon z-10 w-4 block cursor-pointer mr-1" />
+            <input type="checkbox" v-model="checked">
+            <span v-if="edit" @click="deleteToDo(toDo, position)">X</span>
+        </div>
+    </li>
+</template>
+
+<script>
+    export default {
+        name: "ToDo",
+        data: function () {
+            return {
+                name: this.toDo.data.attributes.data.name,
+                errors: null,
+                edit: false,
+                checked: false,
+            }
+        },
+        props: {
+            toDo: {
+                type: Object,
+                require: true
+            },
+            position: {
+                type: Number,
+                require: true
+            }
+        },
+        mounted() {
+            console.log(this.$key)
+        }
+    }
+</script>
+
+<style scoped>
+    .edit-icon {
+        opacity: 0;
+        transition: opacity 0.2s;
+    }
+
+    .todo:hover .edit-icon {
+        opacity: 1;
+        transition: opacity 0.2s;
+    }
+</style>