[ Vue.js ] Todo App 구현 _ 할일 목록(완료, 전체지우기 )

 

 

 

 

 

 

 

할일 완료 기능

 

 

체크박스(체크아이콘)을 추가해서 할일을 다 했으면 완료처리를 만들어주자

스타일은 대략 추가해주고 기존에 쓰던 방식대로 어썸폰트에서 아이콘을 추가해준다.

<i class="checkBtn fa-solid fa-check" v-on:click="toggleComplete"></i

 

일단 이렇게넣어주고 지금부턴 앞에 작성했던 input부분의 코드를 수정해야한다.

TodoInput.vue파일로 넘어가서 methods에 오브젝트를 하나 만들어준다.

 methods: {
    addTodo: function () {
      if (this.newTodoItem !== "") {
        var obj = { completed: false, item: this.newTodoItem };
        // 저장하는 로직
        localStorage.setItem(this.newTodoItem, JSON.stringify(obj));
        this.clearInput();
      }
    },

자바스트립트 객체를 스트링으로 변환해주는 API >> JSON.stringify를 사용해준다.

그냥 obj을 사용하면 값이 object로 보여지기때문에, 어떤값이 들어가는지 모르게되니까 형변환을 한번 진행해주자

 

다시 TodoList.vue로 돌아와서

input쪽 값이 바꼈기때문에 오브젝트 접근방식을 다 변경해줘야한다.

value의 item값을 가져오고 싶은거기 때문에

this.todoItems.push(
        JSON.parse(localStorage.getItem(localStorage.key(i)))
      );

이렇게 값을 가져와야한다.

 

 

템플릿에서도 수정해줘야한다.

<li v-for="(todoItem, index) in todoItems" v-bind:key="todoItem.item" class="shadow">
<span v-bind:class="{ textCompleted: todoItem.completed }">{{ todoItem.item }}</span>
...

여기에 추가로 할일을 완료하면 체크아이콘도 수정되게끔 해야하는데,

처음에 이걸 <i>태그에 넣어서 만들었더니 자꾸 인식을 못한다 

관리자도구들어가보니 i태그가 주석처리되어서 뾰족한 해결방법을 찾지못했다

일단 <span>태그로 묶어서 넣어주니 클릭이 먹히긴한다..

   <li v-for="(todoItem, index) in todoItems" v-bind:key="todoItem.item" class="shadow">
    <span v-on:click="toggleComplete(todoItem,index)" >
      <i class="checkBtn fa-solid fa-check" v-bind:class="{ checkBtnCompleted: todoItem.completed }"></i></span>
    <span v-bind:class="{ textCompleted: todoItem.completed }">{{ todoItem.item }}</span>
    <span class="removeBtn" v-on:click="removeTodo(todoItem, index)">
      <i class="fa-solid fa-trash"></i>
    </span>
  </li>

 

근데 체크의 색이 바뀌는 스타일링을 넣었는데 바로바로 적용이 안된다는점..(새로고침을 해야한다ㅠㅠ)

이건 나중에 수정하도록 해보자

 

 

 

할일 전체지우기

 

TodoFooter.vue 파일에서

<template>
  <div class="clearAllContainer">
    <span class="clearAllBtn" v-on:click="clearTodo">Clear All</span>
  </div>
</template>

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

 

간단하게 메서드 생성해서 동작구현해주면

 

Clear All 클릭했을때 Local storage의 데이터값이 전부 지워진것을 확인할 수 있다!