저장된 할 일 목록을 표시
직접 텍스트를 입력하는 대신 로컬 스토리지의 데이터 개수만큼 목록에 추가하여 표시해보자.
- 로컬 스토리지 데이터를 뷰 데이터에 저장
- 뷰 데이터의 아이템 개수만큼 리스트 아이템 표시
export default {
data() {
return {
Items: []
}
},
created() {
if (localStorage.length > 0) {
for (var i = 0; i < localStorage.length; i++) {
this.Items.push(localStorage.key(i));
}
}
}
}push()는 배열의 끝 요소에 배열 아이템을 하나씩 추가하는 자바스크립트 내장 API
vue의 인스턴스가 생성되자마자 뷰 데이터에 접근할 수 있도록 created() 라이프 사이클 훅에서 로컬 스토리지의 데이터를 뷰 데이터로 옮김
할일 삭제 기능
- 선택한 할 일을 뷰에서 인식
- 선택한 할 일을 로컬 스토리지에서 삭제
- 선택한 할 일을 뷰 데이터에서 삭제
선택한 할 일을 뷰에서 인식하도록 만들기
<li v-for="(Item, index) in Items" :key="Item" class="shadow">
<i class="checkBtn fas fa-check" aria-hidden="true"></i>
{{ Item }}
<span class="removeBtn" type="button" @click="removeItem(Item, index)">
<i class="far fa-trash-alt" aria-hidden="true"></i>
</span>
</li>할일 목록의 인덱스는 vue.js에서 내부적으로 관리하고 있음. template 코드와 removeTodo() 코드를 수정하여 텍스트 값과 인덱스를 반환하자.
v-for 디렉티브에 index가 추가되었는데, index는 임의로 정의한 변수가 아니라 v-for 디렉티브에서 기본적으로 제공하는 변수
선택한 한일을 localStorge와 뷰 데이터에서 삭제
methods: {
removeItem(Item, index) {
// console.log(Item, index);
localStorage.removeItem(Item);
this.Items.splice(index,1);
}
},splices는 js 내장 api, 배열의 특정 인덱스에서 부요한 숫자만큼의 인덱스를 삭제함.
removeItem()는 Item 인자를 사용해 로컬 스토리지에 할 일 텍스트를 삭제함. slice()는 인자로 받은 index를 이용하여 배열의 해당 인덱스에서 1만큼 삭제.
모두 삭제하기
<template>
<div class="clearAllContainer">
<span class="clearAllBtn" @click="clearTodo">Clear All</span>
</div>
</template>
<script>
export default {
methods: {
clearTodo() {
localStorage.clear();
// 로컬 스토리지의 데이터를 모두 삭제함
}
}
}
</script>
<style scoped>
.clearAllContainer {
width: 8.5rem;
height: 50px;
line-height: 50px;
background-color: white;
border-radius: 5px;
margin: 0 auto;
}
.clearAllBtn {
color: #e20303;
display: block;
}
</style>
localStorge에 저장되어 있는 데이터는 삭제되지만 화면이 자동으로 갱신되지 않는다.
따라서 브라우저를 새로 고침해야만 반영된다.
이는 로컬 스토리지의 데이터만 지우고, 할일 목록에 표시되는 할일 데이터를 제거하지 않았기 때문 ....
근데 현제 할일 목록 데이터는 List 컴포넌트에 있음 ㅠㅠ 어떻게 접근해야 할까? 😅😅
[Reference]
Do it Vue.js 입문(이지스퍼블리싱)
