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

TodoList.vue

<template>
  <div>
    <ul>
      <li class="shadow" v-for="(todoItem, index) in propsdata" v-bind:key="todoItem.item">
        <i class="fas fa-check checkBtn" 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"></i></span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
      props: ['propsdata'],
    
    methods: {
      // 제거
      removeTodo: function (todoItem, index) {
        console.log('todoItem, index');
        localStorage.removeItem(todoItem);
        this.todoItems.splice(index, 1); 
      },

      toggleComplete: function (todoItem, index) {
       todoItem.completed = !todoItem.completed;

        localStorage.removeItem(todoItem.item);
        localStorage.setItem(todoItem.item, JSON.stringify(todoItem));
      }
    },
  }
</script>