[Vue.js] Event 처리

 

VUE.JS 목록

 

components/layout/Header.vue

components에 layout 폴더를 만들고 header.vue 파일을 추가합니다.

<template>
    <header class="header">
        <h1>TodoList</h1>
    </header>    
</template>

<script>
export default {
    name: 'Header'
}
</script>

<style scoped>
.header {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
}
.header a {
    color: #fff;
    padding-right: 5px;
}
</style>

App.vue

<template>
    <div id="app">
        <Header />
        <Todos v-bind:todos="todos" v-on:del-todo="deleteTodo" />
    </div>
</template>

<script>
import Header from './components/layout/Header'
import Todos from './components/Todos'

export default {
    name: "app",
    components: {
        Header,
        Todos
    },
    data() {
        return {
            todos: [
                {
                    id: 1,
                    title: 'Todo One',
                    completed: false
                },{
                    id: 2,
                    title: 'Todo Two',
                    completed: true
                },{
                    id: 3,
                    title: 'Todo Three',
                    completed: false
                }
            ]
        }
    },
    methods: {
        deleteTodo(id) {
            this.todos = this.todos.filter(todo => todo.id !== id)
        }
    }
};
</script>

<style>

</style>

AddTodo.vue

Component/AddTodo.vue 파일을 추가합니다.

<template>
    <div>
        <form>
            <input type="text" name="title" placeholder="Add Todo...">
            <input type="submit" value="Submit" class="btn">
        </form>
    </div>    
</template>

<script>
export default {
    name: 'AddTodo'
}
</script>

<style scoped>
form {
    display: flex;
}
input[type="text"] {
    flex: 10;
    padding: 5px;
}
input[type="submit"] {
    flex: 2;
}
</style>

App.vue

<template>
    <div id="app">
        <Header />
        <AddTodo />
        <Todos v-bind:todos="todos" v-on:del-todo="deleteTodo" />
    </div>
</template>

<script>
import Header from './components/layout/Header'
import Todos from './components/Todos'
import AddTodo from './components/AddTodo'

export default {
    name: "app",
    components: {
        Header,
        Todos,
        AddTodo
    },
    data() {
        return {
            todos: [
                {
                    id: 1,
                    title: 'Todo One',
                    completed: false
                },{
                    id: 2,
                    title: 'Todo Two',
                    completed: true
                },{
                    id: 3,
                    title: 'Todo Three',
                    completed: false
                }
            ]
        }
    },
    methods: {
        deleteTodo(id) {
            this.todos = this.todos.filter(todo => todo.id !== id)
        }
    }
};
</script>

<style>
* {
    padding:0;
    margin: 0;
}
.btn {
    display: inline-block;
    border: none;
    background: #555;
    color: #fff;
    padding: 7px 20px;
    cursor: pointer;
}
.btn:hover {
    background: #666
}
</style>

AddTodo.vue

<template>
    <div>
        <form @submit.prevent="addTodo">
            <input type="text" name="title" placeholder="Add Todo..." v-model="title">
            <input type="submit" value="Submit" class="btn">
        </form>
    </div>    
</template>

<script>
import uuid from 'uuid'

export default {
    name: 'AddTodo',
    data() {
        return {
            title: ''
        }
    },
    methods: {
        addTodo() {
            const newTodo = {
                id: uuid.v4(),
                title: this.title,
                completed: false
            }
            this.$emit('add-todo', newTodo)
            this.title = ''
        }
    }
}
</script>
....

uuid 설치하기

$ yarn add uuid

Submit 버튼을 눌르면 newTodo가 emit 됩니다.

App.vue

<template>
    <div id="app">
        <Header />
        <AddTodo v-on:add-todo="addTodo" />
        <Todos v-bind:todos="todos" v-on:del-todo="deleteTodo" />
    </div>
</template>

<script>
import Header from './components/layout/Header'
import Todos from './components/Todos'
import AddTodo from './components/AddTodo'

export default {
    name: "app",
    components: {
        Header,
        Todos,
        AddTodo
    },
    data() {
        ....
    },
    methods: {
        deleteTodo(id) {
            this.todos = this.todos.filter(todo => todo.id !== id)
        },
        addTodo(newTodo) {
            this.todos = [...this.todos, newTodo]
        }
    }
};
</script>
....

AddTodo component에 add-todo 이벤트 리스너를 추가합니다.

methods에 addTodo를 추가합니다.

새로운 todo가 추가되었습니다.

 

VUE.JS 목록