todo remove, toggleCheck

removeTodo라는 함수를 만들었다. 그리고 우리는 localstorage에 정보를 담아두었기 때문에

localstorage에서 값을 지워주어야 한다. 

 

처음에 나는 단순히 todo의 값만 가져와서 localstorage.removeItem(todo)만 해주려고 했는데 이렇게 하면 vue에서는 그 데이터가 아직 남아있다. 따라서 인덱스도 가져와서 splice를 통해서 그 배열을 지워주는 기능을 추가해주었다.

 

여기서 나는 인덱스를 사용해서 지우게되면.. 앞에 위치한 배열을 지우면 번호가 하나씩 앞당겨지게된다고 생각했지만

data에 정의 했으므로 splice를 하면 하나가 줄어들게 되고 다시 업데이트가되면서 새롭게 화면이 렌더된다.

 

따라서 새로운 인덱스 값을 가지고 있기 때문에 잘 지워지는 것을 확인할 수 있었다.

 

 

이번엔 토글 버튼을 추가하여 할 일을 완수 했는지 여부를 표시하려고 한다. 따라서 기존에는 키값과 동일한 밸류값을 넣었지만 object형식으로 넣어주려고한다.

 

이렇게 단순히 보내면 localStorage에서는 [object Object]라고 만들어버리기 때문에 이렇게 해주어야 값이 잘 들어가는 것을 확인할 수가 있다.

localStorage.setItem(this.newTodoItem,JSON.stringify({ content : this.newTodoItem, checked : false }))

 

localStorage.key(i) i는 숫자 

이렇게 하면 숫자에 해당하는 키값만 출력해준다. 

따라서 그 해당하는 값을 얻을려면 localStorage.getItem(localStorage.key(i))을해주어ㅑ한다

 

 

toggleComplete

 

마찬가지로 처음 created되었을 때 데이터를 불러오는 과정에서도 역시 parse로 해줘야 제대로 값을 가져올 수 있다.

먼저 인풋박스를 만들고 todo의 checked의 따라 checked가 결정되도록 하였고, change이벤트가 발생하면 toggleComplete가 발생하도록 하였다.

 

 

:class="{클래스 : true or false }"이렇게 클래스 바인딩을 통해서 todo.checked의 값에 따라 클래스가 오고 없어지도록 설정해주었다.

나는 먼저 todo와 idx를 받아와서, data에 있는 todoList의 값에서 해당 인덱스를 찾아 checked값을 바꿔준뒤

localstorage에 있는 값을 지워주고 다시 

신기 한 것이 주석처리 한 부분도 잘 작동이 되는데. 나는 this.todolist는 data에서 직접 관리하니까 data의 관한 값이 바뀌면 업데이트 되어 렌더링이 된다고 당연히 생각했는데

 

todo.checked < 이렇게 v-for을 통해 만들어진 각 요소를 전달받아서 값을 직접 바꿔도 업데이트, 렌더링이 일어난다...

뭐지...?

 

이렇게 확인을 했을 때

서로 같은 값이 들어오는 것을 보아 아마도 둘이 바인딩 되어있는 것 같다!!

아마 todoList가 바인딩이 되어있었고, 각 요소인 todo는 그 것의 일부이니까 todo또한 바인딩이 되어있는 것이 아닐까?  오브젝트는 바뀌는 것 같다. 배열은 안바뀌는듯??