| <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> |