1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
| <template>
| <li :class="{ completed: todo.done, editing: editing }" class="todo">
| <div class="view">
| <input :checked="todo.done" class="toggle" type="checkbox" @change="toggleTodo(todo)">
| <label @dblclick="editing = true" v-text="todo.text" />
| <button class="destroy" @click="deleteTodo(todo)" />
| </div>
| <input v-show="editing" v-focus="editing" :value="todo.text" class="edit" @keyup.enter="doneEdit"
| @keyup.esc="cancelEdit" @blur="doneEdit">
| </li>
| </template>
|
| <script>
| import { defineComponent } from 'vue';
|
| export default defineComponent({
| name: 'Todo',
| directives: {
| focus(el, { value }, { context }) {
| if (value) {
| context.$nextTick(() => {
| el.focus();
| });
| }
| }
| },
| props: {
| todo: {
| type: Object,
| default: function() {
| return {};
| }
| }
| },
| data() {
| return {
| editing: false
| };
| },
| methods: {
| deleteTodo(todo) {
| this.$emit('deleteTodo', todo);
| },
| editTodo({ todo, value }) {
| this.$emit('editTodo', { todo, value });
| },
| toggleTodo(todo) {
| this.$emit('toggleTodo', todo);
| },
| doneEdit(e) {
| const value = e.target.value.trim();
| const { todo } = this;
| if (!value) {
| this.deleteTodo({
| todo
| });
| } else if (this.editing) {
| this.editTodo({
| todo,
| value
| });
| this.editing = false;
| }
| },
| cancelEdit(e) {
| e.target.value = this.todo.text;
| this.editing = false;
| }
| }
| });
| </script>
|
|
