---
# System prepended metadata

title: 4. 할 일 관리 앱 - 완료/정렬 기능 구현
tags: [지호, Vue.js + TypeScript 완벽 가이드]

---

# 4. 할 일 관리 앱 - 완료/정렬 기능 구현

###### tags: `지호`, `Vue.js + TypeScript 완벽 가이드`

---

## 1. 완료 기능 구현

- Todo 아이템의 타입 정의 후, as를 이용하여 초기화

src/App.vue

![image](https://user-images.githubusercontent.com/24283401/163666317-904d8fc1-71f5-43a7-8e51-c004efc56dba.png)

<br/>

- PropType을 이용하여 제네릭에 Todo 아이템 타입을 가져옴

src/components/TodoListItem.vue

![](https://i.imgur.com/OpDSOKl.png)

<br/>

src/components/TodoListItem.vue

- class 속성에 :를 추가하여 바인딩

![image](https://user-images.githubusercontent.com/24283401/163667521-7d5e7aa9-393a-4652-8329-136ee1c1f45d.png)

- computed 속성에는 꼭 반환 타입 정의

![image](https://user-images.githubusercontent.com/24283401/163667526-7ca34093-343d-4c44-8de1-c0152809c3d5.png)

![image](https://user-images.githubusercontent.com/24283401/163667530-b9fd787b-0a21-4f0f-b469-9a170e98cf24.png)

src/App.vue

toggle에서 받아온 todoItem과 index를 이용하여 해당 dotoItem의 done 값 변경
![image](https://user-images.githubusercontent.com/24283401/163667687-ec4ba06e-04a8-4f95-a521-6d7fb4a98c88.png)

![image](https://user-images.githubusercontent.com/24283401/163667692-af2b6fbb-752d-4e62-a554-d014321c1d3c.png)


<br/>

## 2. 정렬 기능 구현



![image](https://user-images.githubusercontent.com/24283401/163668502-a6e1f5a1-e76a-4568-a04e-0bffdbd1f61c.png)

![image](https://user-images.githubusercontent.com/24283401/163668484-425868e1-33e7-4eaa-95d2-aa508857f329.png)

sort함수 참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort