질문이요ㅠㅠ

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

트렌지션 소개 및 구현

작성

301

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

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

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

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

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

vuejs javascript es6 vuex

답변 2

이효진

질문자

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

장기효(캡틴판교)

지식공유자

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

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

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

인프런 커뮤니티 질문&답변

질문이요ㅠㅠ