-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
103 lines (96 loc) · 1.74 KB
/
app.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
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
var store = {
save(key,value){
localStorage.setItem(key,JSON.stringify(value));
},
fetch(key){
return JSON.parse(localStorage.getItem(key)) || [];
}
}
var list = store.fetch("todolist");
var filter = {
all:function(list){
return list
},
finished:function(list){
return list.filter(function(item) {
return item.isChecked;
});
},
unfinished:function(list){
return list.filter(function(item) {
return !item.isChecked;
});
}
}
var vm = new Vue({
el: ".main",
data: {
list:list,
things:"",
editItem:"",
beforeTitle:"",
visibility:"all",
inputId:"",
},
watch:{
list:{
handler:function(){
store.save("todolist",this.list)
},
deep:true
}
},
computed:{
unCheckedLength(){
return this.list.filter(function(item){
return item.isChecked == false
}).length
},
filteredList(){
return filter[this.visibility] ? filter[this.visibility](this.list) : list
}
},
methods: {
addTodo(ev){
if(this.things !== ""){
var item = {
title:this.things,
isChecked:false,
}
this.list.push(item)
}
this.things = "";
},
deleteTodo(item){
var index = this.list.indexOf(item);
this.list.splice(index,1);
},
editTodo(item){
this.beforeTitle = item.title;
this.editItem = item
},
edited(item){
this.editItem = ""
},
cancel(item){
item.title = this.beforeTitle;
this.editItem = "";
this.beforeTitle = ""
}
},
directives:{
"focus":{
update(el,binding){
if(binding.value){
el.focus()
}
}
}
}
});
function watchHashChange(){
var hash = window.location.hash.slice(1);
vm.visibility = hash;
};
watchHashChange();
window.addEventListener("hashchange",watchHashChange)