해결된 질문
작성
·
410
·
수정됨
1
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);
},
답변 2
1
그런데 프로그램 수정 후
아래와 같은 warn이 뜨면서 기존에 등록해놓았던 localStorage에 있는 데이터가 뜨지 않는데 이유가 뭔가요?
[Vue warn]: Failed to resolve directive: blind
at <TodoList propsdata= [] onToggleItem=fn<bound toggleOneItem> onRemoveItem=fn<bound removeOneItem> >
at <App>
1
자답입니다. methods 부분에서 addOneItem 이후 괄호를 종료해버려서 methods내에서 찾을 수 없었네요. methods 들을 다 감싼 후 실행하니 동작합니다.
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);
}
}
네 저도 본문에 첨부해 주신 내용 보니 메서드 밖에 선언하신거 같더라구요. 고생하셨습니다 :)