+22
-6
lines changedFilter options
+22
-6
lines changed Original file line number Diff line number Diff line change
@@ -7,12 +7,25 @@ const todoApp = new Vue({
7 7
{ text: 'Learn Vue', isDone: false },
8 8
{ text: 'Build something awesome', isDone: false },
9 9
],
10 +
editing: null,
10 11
},
11 12
methods: {
12 13
createTodo(event) {
13 14
const textbox = event.target;
14 15
this.todos.push({ text: textbox.value, isDone: false });
15 16
textbox.value = '';
16 -
}
17 +
},
18 +
startEditing(todo) {
19 +
this.editing = todo;
20 +
},
21 +
finishEditing(event) {
22 +
if (!this.editing) { return; }
23 +
const textbox = event.target;
24 +
this.editing.text = textbox.value;
25 +
this.editing = null;
26 +
},
27 +
cancelEditing() {
28 +
this.editing = null;
29 +
},
17 30
}
18 31
});
Original file line number Diff line number Diff line change
@@ -23,15 +23,18 @@ <h1 v-text="title"></h1>
23 23
<section class="main">
24 24 25 25
<ul class="todo-list">
26 -
<!-- These are here just to show the structure of the list items -->
27 -
<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
28 -
<li v-for="todo in todos" :class="{ completed: todo.isDone }">
26 +
<li v-for="todo in todos" :class="{ completed: todo.isDone, editing: todo === editing }">
29 27
<div class="view">
30 28
<input class="toggle" type="checkbox" v-model="todo.isDone">
31 -
<label>{{todo.text}}</label>
29 +
<label @dblclick="startEditing(todo)">{{todo.text}}</label>
32 30
<button class="destroy"></button>
33 31
</div>
34 -
<input class="edit" value="Rule the web">
32 + 33 +
<input class="edit"
34 +
@keyup.esc="cancelEditing"
35 +
@keyup.enter="finishEditing"
36 +
@blur="finishEditing"
37 +
:value="todo.text">
35 38
</li>
36 39
</ul>
37 40
</section>
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4