Vue.js - 할일 목록 연습
참고 페이지 kr.vuejs.org v-for 와 컴포넌트
Simple list filter with Vue.js
checkbox 필터 적용(check된 항목 제외 검색) todo list
<div id="app">
<input type="text" v-model="todoText" @keyup.enter="addTodo">
<input type="checkbox" v-model="filterCompleted" >
<ul>
<li
v-for="(todo, index) in todosWithFilter"
:todo="todo"
:key="todo.id"
>
<input v-model="todosWithFilter[index].isCompleted" value="1" type="checkbox">
<button @click="removeTodo(index)">remove</button>
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
todos: [],
todoText: '',
todoIndex: 0,
filterCompleted: false
},
methods: {
addTodo: function(){
this.todos.push({ id: this.todoIndex++, text: this.todoText, isCompleted: false });
this.todoText = '';
},
removeTodo: function(todoIndex){
Vue.delete(this.todos, todoIndex);
}
},
computed: {
todosWithFilter: function(){
var filterCompleted = this.filterCompleted;
return this.todos.filter(function(todo){
if(filterCompleted){
return !todo.isCompleted;
}else{
return true;
}
});
}
}
});