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;
                    }
                });
            }
        }
    });