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

TodoList.vue에서 removeBtn으로 removeTodo함수를 호출하면서 부모창으로 emit을 요청했지만

app.vue에서 콘솔로그를 출력해봤을때 해당 함수를 호출이 안되는데, 원인이 뭔지를 모르겠습니다.

강의 내용대로 입력했는데, 해당 기능이 수행되지 않고 있습니다.

localhost:8080 으로 접속했을 때 아래와 같은 오류가 뜹니다.

app.vue소스에서 methods 영역에 아래와 같이 선언했는데 못찾는 이유가 무엇인가요?

removeOneItem: function(todoItem){

에러메시지 -

main.js:4 [Vue warn]: Property "removeOneItem" was accessed during render but is not defined on instance.

at <App>

TodoList.vue

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


<script>
export default {
    props:['propsdata'], 

     methods: {
        removeTodo : function(todoItem, index){
            this.$emit('removeItem', todoItem, index);
        },
        toggleComplete: function(todoItem, index){
            console.log(todoItem.item + " " + index);
            todoItem.completed = !todoItem.completed;
            localStorage.removeItem(todoItem.item);
            localStorage.setItem(todoItem, JSON.stringify(todoItem));


        }
    }

}
</script>

app.vue

<template>
  <div ip="app">
    <TodoHeader></TodoHeader>
    <TodoInput v-on:addTodoItem="addOneItem"></TodoInput>
    <!-- <TodoInput v-on:하위 컴포넌트에서 발생시킨 이벤트 이름="현재 컴포넌트 매소드명"></TodoInput> -->
    <TodoList v-bind:propsdata="todoItems" v-on:removeItem="removeOneItem"></TodoList>
    <!-- <TodoList v-bind:propsdata="todoItems"></TodoList> -->
    <!-- <TodoList v-bind:내려보낼 프롭스 속성 이름="현재 위치의 컴포넌트 데이터 속성"></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){

      console.log("addOneItem:[" + todoItem + "]");

      var obj = { completed : false, item: todoItem };
      // console.log(this.newTodoItem);
      //저장하는 로직
      localStorage.setItem(todoItem,JSON.stringify(obj));
      this.todoItems.push(obj);
    }
  },
  removeOneItem: function(todoItem){

    // console.log("removeOneItem app remove items:[" + index + "]:" + todoItem.item);
    console.log("removeOneItem app remove items:[:" + todoItem.item);
    localStorage.removeItem(todoItem.item);
    // this.todoItems.splice(index, 1);

  },