카테고리

질문 & 답변
세부 분야

프론트엔드
해결 여부

미해결

리스트의 이름이 뜨지 않습니다

22.04.25 22:52 작성 조회수 144

- 밑에 있는 사진이 vue 개발자 도구 캡쳐이고 아래는 TodoList.vue 코드입니다 Json말고 getitem으로 했는데도 똑같이 보이지 않네요 연결을 끊고 다시 해봐도 변하지 않습니다

TodoList.vue

 
<template>
<div>
  <ul>
    <li v-for="(todoItem, index) in todoItems" v-bind:key="todoItem.item" class="shadow">
      <i class="checkBtn fas fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete(todoItem, index)"></i>
      <span v-bind:class="{textCompleted: todoItem.completed}">{{ todoItem.Item }}</span>
      <span class="removeBtn" v-on:click="removeTodo(todoItem, index)">
        <i class="fas fa-trash-alt"></i>
      </span>
    </li>
  </ul>
</div>
</template>

<script>
export default {
  data: function() {
    return {
      todoItems: []
    }
  },

    methods: {
    removeTodo : function(todoItem,index) {
      this.todoItems.splice(index, 1);
      // console.log(todoItem, index);
      localStorage.removeItem(todoItem);
    },
    toggleComplete: function(todoItem,index) {
      todoItem.completed = !todoItem.completed;
      //localstorage에 갱신하는 부분
      localStorage.removeItem(todoItem.item);
      localStorage.setItem(todoItem.item, JSON.stringify(todoItem));
    }
  },

  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(localStorage.getItem(localStorage.key(i)));
          this.todoItems.push(JSON.parse(localStorage.getItem(localStorage.key(i))));
        }
      }
    }
  }

}
</script>

<style scoped>
ul {
  list-style-type: none;
  padding-left: 0px;
  margin-top: 0;
  text-align:left;
}
li {
  display: flex;
  min-height: 50px;
  height: 50px;
  line-height: 50px;
  margin: 0.5rem 0;
  padding: 0 0.9rem;
  background:white;
  border-radius: 5px;

}

.removeBtn {

  margin-left: auto;
  color:#de4343;
}

.checkBtn {
  line-height: 45px;
  color: #62acde;
  margin-right: 10px;
}
.checkBtnCompleted {
  color:black;
}
.textCompleted {
  text-decoration: line-through;
  /* color:#b3adad; */

}
</style>
 
 
 
TodoInput.vue > script 
 
<script>
export default {
  data: function() {
    return {
      newTodoItem: ''
    }
  },
  methods: {
    addTodo: function() {
      if (this.newTodoItem !== '') {
        var obj = {completed: false, item: this.newTodoItem};
        localStorage.setItem(this.newTodoItem, JSON.stringify(obj));
        this.clearInput();
      }
    },
    clearInput: function() {
      this.newTodoItem = '';
    }
  }
}