Vue.js To Do List 만들기 #3 컴포넌트 구현(2)

Vue.js To Do List 만들기 #3 컴포넌트 구현(2)

---

컴포넌트 생성 및 등록(2)

컴포넌트 구현 > TodoList

TodoList컴포넌트는 localStorage에 저장되어있는 item 목록을 화면에 보여주는 역할을 한다. 순서가 없는 목록은 ul, li 요소를 사용한다. 먼저 localStorage에 저장되어있는 목록을 vue 데이터 todoItems에 저장한다. 

/* /src/components/TodoList.vue > <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));
            }
        }
    }
}

created()는 라이프사이클 단계 중 data속성과 methods속성이 정의된 후 실행되는 단계이다.

다음으로 v-for디렉티브를 사용하여 todoItems의 목록만큼 반복하여 <li> 태그를 출력한다.

<!-- /src/components/TodoList.vue > <template></template> -->

<section>
    <ul>
        <li v-for="todoItem in todoItems">{{ todoItem }}</li>
    </ul>
</section>

localStorage에 있는 목록이 화면에 출력됐다.

내가 저장한 할일 목록이 잘 출력됐다. 그런데 뭔가 불편하다. 할일을 추가하면 localStorage에는 저장이 되는데 화면에는 새로고침을 해야만 출력이 되고 있다.

 

새로고침을 해야만 할일 목록이 갱신된다.

이 문제는 나중에 다시 수정하기로 하고 삭제 기능을 먼저 추가한다. 삭제기능을 추가하기 위하여 먼저 <li> 태그내에 삭제 버튼을 추가하고, 버튼을 클릭했을때 삭제 기능(removeTodo메소드)이 실행되도록 클릭 이벤트를 추가한다.

 

<!-- /src/components/TodoList.vue > <template></template> -->

<section>
    <ul>
        <li v-for="todoItem in todoItems">
            {{ todoItem }}
            <button v-on:click="removeTodo">삭제</button>
        </li>
    </ul>
</section>

/* /src/components/TodoList.vue > <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(){
        	//삭제기능
        }
    }
}

삭제 버튼을 클릭했을때 선택된 할 일의 텍스트 값과 인덱스를 가져오기 위하여 template 코드와 removeTodo메소드를 수정한다. 할 일 목록의 index는 vue에서 내부적으로 관리하고 있다.

<!-- /src/components/TodoList.vue > <template></template> -->

<section>
    <ul>
        <li v-for="(todoItem, index) in todoItems" :key="todoItem">
            {{ todoItem }}
            <button v-on:click="removeTodo(todoItem, index)">삭제</button>
        </li>
    </ul>
</section>

/* /src/components/TodoList.vue > <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){
            console.log(todoItem, index);
        }
    }
}

내가 삭제하고자 하는 할 일의 내용과 index값이 console창에 출력되는지 확인한다.

 

삭제버튼을 클릭하면 선택한 아이템의 내용과 index가 콘솔에 출력된다.

선택한 아이템의 index를 알았으니 이제 localStorage와 vue데이터에서 선택한 아이템을 삭제하기 위하여 removeTodo메소드를 수정한다.

/* /src/components/TodoList.vue > <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);
            //splice()는 첫번째 인자값(index)로부터 두번째 인자값(1)만큼을 삭제한다.
            this.todoItems.splice(index, 1);
        }
    }    
}

vue데이터와 localStorage에서 선택한 아이템이 삭제된다.

여기서 마무리 하고 다음 포스팅에서는 전체 삭제하기 버튼이 들어가는 TodoFooter컴포넌트를 구현 할 예정이다.

 

(계속..)

 

2019/09/05 - [vue.js] - Vue.js To Do List 만들기 #2 컴포넌트 구현(1)

Vue.js To Do List 만들기 #2 컴포넌트 구현(1)

2019/09/05 - [vue.js] - Vue.js To Do List 만들기 #1 프로젝트 생성

Vue.js To Do List 만들기 #1 프로젝트 생성

2019/07/24 - [vue.js] - vue.js 입문

vue.js 입문