• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

질문이요ㅠㅠ

20.02.25 21:47 작성 조회수 206

1

1. 다 제대로 구현이 되었는데 todo목록작성을 다 한 후 에 새로고침을 하면 목록들이 처음 작성한 목록대로 있어주지 않고 뒤죽박죽 섞이는데 어떻게 해야 하나요?

2. clearAll 옆에 clearSelection이라는 버튼을 만들었고 이 버튼은 체크되어있는 리스트(completed가 true인 리스트)만 지우는 일을 하게끔 구현하고 싶습니다.

지금 vuex 강의까지 다 듣고 이런저런 방법으로 시도해 보았는데 잘 안되서요ㅠㅠ ..

체크를 하고 새로고침을 하고 나면 vuex 개발자 도구에서 state에 completed값이 다시 초기화 되어버리는것도 문제고

completed가 true인 값만 받아서 삭제처리를 하고싶은데 로직을 어떻게 해야 할까요???

course-thumbnail

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

트렌지션 소개 및 구현

강의실 바로가기

답변 2

·

답변을 작성해보세요.

2

이효진님의 프로필

이효진

질문자

2020.03.03

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

1

장기효(캡틴판교)님의 프로필

장기효(캡틴판교)

지식공유자

2020.02.28

안녕하세요 효진님 제가 답변이 좀 늦었네요..! 질문에 바로 답변드릴게요.

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

남은 강의도 화이팅입니다 :)

이 글과 비슷한 Q&A