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
72
73
74
75
76
77
78
79
| <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-focus="editing"
| v-show="editing"
| :value="todo.text"
| class="edit"
| @keyup.enter="doneEdit"
| @keyup.esc="cancelEdit"
| @blur="doneEdit">
| </li>
| </template>
|
| <script>
| export default {
| 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>
|
|
