리스트와 삭제를 구현해보겠습니다.

1.리스트

TodoList.vue

<template>
    <section>
        <ul>
            <li v-for="(todoItem,index) in todoItems" :key="todoItem" class="shadow">
                <i class="checkBtn fa fa-check" aria-hidden="true"></i>
                {{todoItem}}
                <span class="removeBtn" type="button" @click="removeTodo(todoItem,index)">
                    <i class="fa fa-trash-o"></i>
                </span>
            </li>
        </ul>
    </section>
</template>

<script>
export default {
    data() {
        return {
            todoItems : []
        }
    },
    created() {
        if (localStorage.length > 0) {
            for (var i=0;i <localStorage.length; i++) {
                this.todoItems.push(localStorage.key(i));
            }
        }
    },
    methods : {
        removeTodo(todoItem,index) {
            localStorage.removeItem(todoItem);
            this.todoItems.splice(index,1);
        }
    }
}
</script>

<style>
    ul {padding:0;list-style:none}
    li {display:flex;min-height:50px;height:50px;line-height:50px;margin:0.5rem 0;padding:0 0.9rem;background:#fff;border-radius:5px}
    .checkBtn {line-height:45px;color:#62acde;margin-right:5px}
    .removeBtn {margin-left:auto;color:#de4343}
</style>

template 영역

<template>
    <section>
        <ul>
            <li v-for="(todoItem,index) in todoItems" :key="todoItem" class="shadow">
                <i class="checkBtn fa fa-check" aria-hidden="true"></i>
                {{todoItem}}
                <span class="removeBtn" type="button" @click="removeTodo(todoItem,index)">
                    <i class="fa fa-trash-o"></i>
                </span>
            </li>
        </ul>
    </section>
</template>

li 태그를 todoItems의 배열의 길이만큼 만들고, 배열값을 출력합니다.
추가로 삭제버튼을 추가하고 삭제 이벤트를 걸어줍니다.
v-for 디렉티브를 위 형태로 사용하면 index의 값을 가져올 수 있습니다.

script 영역

<script>
export default {
    data() {
        return {
            todoItems : []
        }
    },
    created() {
        if (localStorage.length > 0) {
            for (var i=0;i <localStorage.length; i++) {
                this.todoItems.push(localStorage.key(i));
            }
        }
    },
    methods : {
        removeTodo(todoItem,index) {
            localStorage.removeItem(todoItem);
            this.todoItems.splice(index,1);
        }
    }
}
</script>

로컬스토리지를 담을 todoItems 배열을 기본으로 만듭니다.
컴포넌트가 생성된후 로컬스토리지의 값을 가져와 배열에 넣습니다.
삭제 메소드도 만들어 주는데 키값과 인덱스를 받아서 splice 메소드로 삭제합니다.

여기까지가 기본적인 등록,삭제,리스트입니다.
추가로 전체삭제 버튼을 만들겠습니다.

2.전체 삭제

TodoFooter.vue

<template>
    <div class="clearAllContainer">
        <span class="clearAllBtn" @click="clearTodo">Clear All</span>
    </div>
</template>

<script>
export default {
    methods : {
        clearTodo() {
            localStorage.clear();
        }
    }
}
</script>

<style>
    .clearAllContainer {width:8.5rem;height:50px;line-height:50px;border-radius:5px;margin:0 auto}
    .clearAllBtn {color:#e20303;display:block}
</style>

전체삭제는 간단합니다.
삭제버튼을 만들어주고 로컬스토리지를 비우면 됩니다.

하지만 TodoInpute의 newTodoItem, TodoList의 todoItems는 모두 같은 데이터를 씀에도 나눠져 있어
새로고침을 통해서만 데이터의 변경을 확인할 수 있습니다.
이 문제점을 해결하기 위해 최상위 App 컴포넌트에 todoItems를 정의하고 하위 컴포넌트로 전달하는 작업을 해야합니다.