/
main.js
48 lines (44 loc) · 823 Bytes
/
main.js
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
const tasks = [
{ id: 0, text: 'Clean the house' },
{ id: 1, text: 'Order groceries' },
{ id: 2, text: 'Build an app' }
];
Vue.component('todo-item', {
props: ['todo'],
methods: {
},
template: `
<li>
{{ todo.text }}
<button type="button" v-on:click="$emit('delete-item', todo.id)">Delete</button>
</li>
`
});
var app = new Vue({
el: '#app',
data: {
task: '',
todos: tasks
},
computed: {
count() {
return this.todos.length;
}
},
methods: {
addItem () {
if (this.task) {
this.todos.push({ id: this.todos.length, text: this.task });
this.task = '';
this.count++;
}
},
deleteItem (item) {
this.todos.splice(item, 1);
this.count--;
},
clearAll() {
this.todos = [];
}
}
});