태태개발일지 - vuejs

기본 컴포넌트

 

<template>
  <div id="app">
    <TodoHeader></TodoHeader>
    <TodoInput></TodoInput>
    <TodoList></TodoList>
    <TodoFooter></TodoFooter>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoInput from './components/TodoInput.vue'
import TodoList from './components/TodoList.vue'
import TodoFooter from './components/TodoFooter.vue'



export default {
  components:{
    'TodoHeader': TodoHeader,
    'TodoInput': TodoInput,
    'TodoList': TodoList,
    'TodoFooter': TodoFooter

  }
}
</script>

<style>
</style>

 

Todo App을 관리하기 위하여 각각 Input부분과 List부분에 배열을 넣어주어 localStorage에 저장하는 코드로 작성을 해보았다.

 

문제점이 바로바로 로딩이 안된다는 것이였다.

 

그렇기 때문에 배열을App.vue에  놓아두고 Input과 List의 기능들이 emit을 통해서 이벤트를 일으키면 그에 맞게 localStorage를 변형시키고 ,App.vue 에 있는 배열을 즉각 갱신하여 이 단점을 보완했다.

 

<template>
  <div id="app">
    <TodoHeader></TodoHeader>
    <TodoInput v-on:addTodoItem="addOneItem"></TodoInput>
    <TodoList v-bind:propsdata="todoItems" v-on:removeItem="removeOneItem"></TodoList>
    <TodoFooter></TodoFooter>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoInput from './components/TodoInput.vue'
import TodoList from './components/TodoList.vue'
import TodoFooter from './components/TodoFooter.vue'



export default {
  data:function(){
    return {
      todoItems: []
    }
  },
  methods:{
    addOneItem: function(todoItem){
      var obj = {completed: false, item: todoItem};
      localStorage.setItem(todoItem, JSON.stringify(obj));
      this.todoItems.push(obj);
    },
    removeOneItem: function(todoItem,index){
      localStorage.removeItem(todoItem.item);
      this.todoItems.splice(index, 1);
    }
  },
  created: function(){
   if(localStorage.length > 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))));
       }
     }
   }
  },
  components:{
    'TodoHeader': TodoHeader,
    'TodoInput': TodoInput,
    'TodoList': TodoList,
    'TodoFooter': TodoFooter

  }
}
</script>

<style>
body{
  text-align: center;
  background-color: #F6F6F6;
}
input{
  border-style: groove;
  width: 200px;
}
butoon{
  border-style: groove;
}
.shadow{
  box-shadow: 5px 10px 10px rgba(0,0,0,0.03);
}
</style>