Vue.js 투두리스트 - 완료 상태로 전환하기, 데이터 삭제하기

 

잠깐 스톱했던 이유가 index 파일의 스타일이 먹히지 않아서 고민이었는데..

개발자 친구에게 물어본 결과 public파일의 index가 아닌 다른 index파일에서

작업해서 였다!! 이것 때문에 일주일을 고민했는데 이제 완전 해결! 계속해서 학습하기..

 

 

 

600

 

 

 

---

Vue.js 투두리스트 - 완료 상태로 전환하기, 데이터 삭제하기

2022/06/05

 

1. Todolist 체크박스 만들고 완료시 완료상태표시

 

 

 

-미리 체크박스 스타일링 확인

.checkBtn{
  line-height: 45px;
  color: aquamarine;
  margin-right: 5px;

}
.checkBtnCompleted{
  color: grey;
}
.textCompleted{
  text-decoration: line-through;
  color: grey;
}

 

 

 

-input에만 해당되는 스타일인지 확인 (scoped사용)

 

<style scoped> </style>

 

 

 

2.input스타일 중 체크박스 추가 + 클릭시 상태변화 v-on:click 사용

(*awesome폰트가 안되어서 기본 타입으로 추가..ㅠㅠ)

 

 

 

-토글체크시 상태변화 필요하니, methods에 추가

 

toggleComplete:function(){}

 

 

 

-todolist에 span을 추가하여 클래스 붙여주기

 <span class="textCompleted">{{ todoItem.item }}</span>

 

 

 

-확인

 

 

 

-클릭 했을때만 화색 라인기 가지도록 v-bind:class사용, toggleComplete 라는 메소드 생성

(*v-bind:class는 스타일을 뷰로 다룰수 있음!)

completed라는 값이 true/flase에 따라 해당 스타일 적용

 

 

<span v-bind:class="{textCompleted: todoitem.completed}">{{ todoItem.item }}</span>

 

 

 

-체크박스도 v-bind:class를 사용하여 변경

:todoItem 값이 true/false에 따라서 스타일 변경

 

 

예)기존

<input type="checkbox" class="checkBtn" v-onclick="toggleComplete">

 

 

변경

-true/false 상태에 따라 클래스 변경 가능

-toggleComplete 값도 맞추어서 변경 

*v-bind:class="{}" 양식을 잘 지켜야함!!

      <input type="checkbox" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-onclick="toggleComplete(todoItem, index)">

 

 

 

왜?

-로컬스토리지에서 이미 true/flase값을 가지고 있어서 판별 가능

 

 

 

**풀리지 않는 의문... 예제에서는 toggleCompleted도 객체에 todoItem, index를 넣었는데..

오히려 넣으면 전체 작동이 안됨!! 제외하면 멀쩡하게 구동됨!! 이게 왜 되는거지? 대체 왜 이게 되는걸까..?

(하지만 멀쩡히 구동 됨으로 넘어가겠읍니다. 언젠가 알수 있겠지!) 

    toggleComplete:function(todoItem){
      todoItem.completed =! todoItem.completed;

    }

 

 

-로컬스토리지 변경사항 업데이트 하는코드 추가

:자동으로 업데이트하고 데이터 고쳐주는것도 직접 코드로 입력해야한다

 

 

localStorage.removeItem(todoItem.item);
localStorage.setItem(todoItem.item, JSON.stringify(todoItem));

 

 

removeItem이랑 setItem을 사용하여, 삭제하고, 다시 아이템을 추가하는 코드!

개발자도구에서도 보면 value가 수정되는걸 확인할수 있다.

 

 

 

 

 

2. Todolist 체크박스 만들고 완료시 완료상태표시

하단 푸터에 clear all 버튼 만들어서 내용 전체 삭제

 

 

 

 

 

-clearAllContainer와 clearAllBtn의 스타일 미리 정의

-style scoped 적용하고, 각 스타일 정의하기

-div와 span에 각각 컨테이너와 버튼 스타일 붙여주기

 

 

 <div class="clearAllContainer">
      <span class="clearAllBtn">
        Clear All
      </span>
  </div>

 

 

-v-on:click으로 clearTodo 메소드 실행

-clearTodo 메소드 정의: 실행시, localStorage의 아이템들을 clear all

(*난 여기서 로컬스토리지 아이템 하나하나를 선택하기 위해서 if, lenght>0를 사용할줄 알았는데,

localStorage 자체의 clear가 전체 아이템 삭제라 그럴일 없다는 사실~!!

이렇게.. API를 잘 알고 있어야지 코드를 멍청하게 길게 쓰지 않는다..우측이 내가 생각한거 좌측이 실제..ㅎㅎ)

 

 

 

 

 

 

-clear all 버튼을 클릭하면 key와 value값이 사라진다. 짠!

 

 

 

 

 

 

현재까지 만든버전은 각 콤포넌트간에 데이터 동기화가 되지 않는다.

다음 포스팅부터는 리팩토링해서 각 콤포넌트간의 데이터 상태 동기화를 할수 있도록 바꾸려고 한다.