54 lines
1.2 KiB
Vue
54 lines
1.2 KiB
Vue
<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>
|