리스트의 순서

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

TodoList 컴포넌트의 할 일 완료 기능 구현

작성

166

input에 할일을 추가하면 밑에 안쌓이고 순서가 왜 뒤죽박죽이 되나요?? 어떻게 넣는 순서대로 밑에 쌓이도록 하나요?

vuejs javascript es6 vuex

답변 2

MIKE.aeon

저도 궁금해서 구글링해서 만들어 봤습니다. 참고하세요,

TodoList.vue에서, methods 에 아래 함수 추가하시고 create/for문 다음에 한줄 추가하면 될것 같습니다. 함수는 인터넷에 있는거 복사해서 구현했습니다.

  methods: {
    sortObj: function( a, b ) { <====== 추가
      if ( a.item < b.item ){
        return -1;
      }
      if ( a.item > b.item ){
        return 1;
      }
      return 0;
   },
------------------------------------------------
      for (var i=0; i<localStorage.length; i++){
        if(localStorage.key(i) != 'loglevel:webpack-dev-server') {
          this.todoItems.push( JSON.parse(localStorage.getItem(localStorage.key(i))) );
        }
      }
      this.todoItems.sort(this.sortObj); <====== 추가

캡틴판교

지식공유자

안녕하세요 도현님, 답변이 늦었네요..! :) 추가 했을 때 순서가 보장되지 않는 이유는 로컬 스토리지에서 꺼내온 리스트를 정렬하지 않고 화면에 뿌리고 있기 때문입니다. 배열의 sort API를 이용해서 한번 정렬해보시면 될 것 같아요 :)

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

리스트의 순서