질문이요ㅠㅠ

Question

1. 다 제대로 구현이 되었는데 todo목록작성을 다 한 후 에 새로고침을 하면 목록들이 처음 작성한 목록대로 있어주지 않고 뒤죽박죽 섞이는데 어떻게 해야 하나요? 2. clearAll 옆에 clearSelection이라는 버튼을 만들었고 이 버튼은 체크되어있는 리스트(completed가 true인 리스트)만 지우는 일을 하게끔 구현하고 싶습니다. 지금 vuex 강의까지 다 듣고 이런저런 방법으로 시도해 보았는데 잘 안되서요ㅠㅠ .. 체크를 하고 새로고침을 하고 나면 vuex 개발자 도구에서 state에 completed값이 다시 초기화 되어버리는것도 문제고 completed가 true인 값만 받아서 삭제처리를 하고싶은데 로직을 어떻게 해야 할까요???

gywls33945120 · Answer

답변 너무 감사합니다!!!

captain · Answer

안녕하세요 효진님 제가 답변이 좀 늦었네요..! 질문에 바로 답변드릴게요. 1. 브라우저 새로 고침을 했을 때 아마 할 일 목록을 로컬 스토리지에서 꺼내와서 v-for로 목록을 나열해주셨을텐데요. 순서가 뒤죽박죽 되는 이유는 로컬 스토리지에서 할 일 목록을 꺼내와서 배열 data에 넣어줄 때 정렬(sorting)이 되어 있지 않아서 그렇습니다. 따라서, 1,2,3,4 이런식으로 정렬되어 있는 걸 보시고 싶으면 아래 sort API를 사용해보시면 될 것 같아요 :) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort 2. 질문하신 기능은 배열의 filter() 라는 API를 사용하시면 쉽게 구현하실 수 있을거에요 :) 로직을 예시로 적어드리면 이런 느낌일 것 같습니다. new Vue ({ data : function () { return { todoItems: [{ id: 1 , completed: false }] }; }, methods: { clearCompletedTodo : function () { this . todoItems = this . todoItems . filter ( function ( todoItem ) { return ! todoItem . completed ; }); } } }); https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter 남은 강의도 화이팅입니다 :)