[Vue.js] 로컬스토리지 새로고침 문제 ;; (해결)

To Do App을 만들다.

• vue2로 컴포넌트간 데이터 주고 받는게 이해가 안되서 혼자 To Do App을 만들어 보고 있습니다.
• 프롭스로 데이터 내리고, 이벤트로 올리는 걸 하면서 익숙해지는 중이었습니다.
• ⁉️ 근데 문제가 생겼네요.
• 말이 안되는 문제라 지금 아직 해결을 못했어요.

created() {   
    for (let i = 0; i < localStorage.length; i++) {
      let todoKey = localStorage.key(i);
      console.log(todoKey)
      let item = JSON.parse(localStorage.getItem(todoKey));
      console.log(item);
      this.todoList.push(item);
    }
  },

• 문제가 발생한 코드는 위 코드입니다.
• 문제는 저 위 함수가 실행이 되면 로컬스토리지에 있던 내용들이 전부 삭제가 된다는 것입니다.
• 저기서 this.todoList.push(item)을 주석 처리하면 문제가 없습니다.
• this.todoList라는 데이터를 직접 건드리는게 문제가 되는것 같은데, 이거.. 말이 되나요?
• 해결되면 다시 돌아와서 해결 법을 적겠습니다.

원인을 찾았습니다. 원인은 역시 "나!"

 <span class="removeBtn" v-on="removeTodo(todo, index)">
 <!-- <span class="removeBtn" v-on:click="removeTodo(todo, index)"> -->

• 위 코드를 보면 v-on부분이 이상한걸 볼수 있습니다.
• 이상한 코딩 덕에 새로고침을 통해 컴포넌트를 불러올때 removeTodo함수가 불러져서 로컬 스토리지의 아이템들이 삭제되었나봅니다. console.log로 확인하니 해당 함수가 실행되더라구요 ㅎㅎ
• 삽질도 해봤겠다. ToDoApp을 통해 데이터 내리고 이벤트 올리는 작업도 해봤겠다. 이제 vue 컴포넌트로 ui이외 기능을 만들 시간이 왔네요.
• 리액트로 정말 쉽게 될 일을 뷰로는 감도 안잡혀서 스트레스를 많이 받았었는데... 이제 좀 익숙해지고 있습니다. 역시 진리의 To Do App... ㅎㅎ 화이팅!