Permalink
Browse files

UPDATE todo list with a double-click

  • Loading branch information...
amejiarosario committed Aug 13, 2018
1 parent 5d356e3 commit 4af7d318597ee8bd2ee9d909c6cc65b7b94fd8cc
Showing with 22 additions and 6 deletions.
  1. +14 −1 app.js
  2. +8 −5 index.html
15 app.js
@@ -7,12 +7,25 @@ const todoApp = new Vue({
{ text: 'Learn Vue', isDone: false },
{ text: 'Build something awesome', isDone: false },
],
editing: null,
},
methods: {
createTodo(event) {
const textbox = event.target;
this.todos.push({ text: textbox.value, isDone: false });
textbox.value = '';
}
},
startEditing(todo) {
this.editing = todo;
},
finishEditing(event) {
if (!this.editing) { return; }
const textbox = event.target;
this.editing.text = textbox.value;
this.editing = null;
},
cancelEditing() {
this.editing = null;
},
}
});
@@ -23,15 +23,18 @@ <h1 v-text="title"></h1>
<section class="main">
<ul class="todo-list">
<!-- These are here just to show the structure of the list items -->
<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
<li v-for="todo in todos" :class="{ completed: todo.isDone }">
<li v-for="todo in todos" :class="{ completed: todo.isDone, editing: todo === editing }">
<div class="view">
<input class="toggle" type="checkbox" v-model="todo.isDone">
<label>{{todo.text}}</label>
<label @dblclick="startEditing(todo)">{{todo.text}}</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Rule the web">
<input class="edit"
@keyup.esc="cancelEditing"
@keyup.enter="finishEditing"
@blur="finishEditing"
:value="todo.text">
</li>
</ul>
</section>

0 comments on commit 4af7d31

Please sign in to comment.