splice

미해결질문
장기효(캡틴판교) 프로필
장기효(캡틴판교) 1달 전

안녕하세요 윤희님, 혹시 코드를 첨부해주실 수 있을까요? 코드보면 답변 드릴 수 있을 것 같아요 :)

원윤희 프로필
원윤희 1달 전
<template>
<div>
<ul>
<li v-for="(todoItem, index) in propsdatas" 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="removeTodo(todoItem, index)">
<i class="fas fa-trash-alt"></i>
</span>
</li>
<!--<li>2</li>
<li>3</li> -->
</ul>
</div>
</template>

<script>
export default {
methods: {
removeTodo: function(todoItem, index) {
console.log(todoItem, index);
localStorage.removeItem(todoItem); //api
this.todoItems.splice(index, 1);
},
toggleComplete: function(todoItem, index) {
console.log();
}
}
}
</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: 5px;
}
.checkBtnCompleted {
color: #b3adad;
}
.textCompleted {
text-decoration: line-through;
color: #b3adad;
}
</style>
원윤희 프로필
원윤희 1달 전

리팩토링 할 일 목록 표시 가능 강의로 넘어가서 코드가 좀 다를꺼예요.

장기효(캡틴판교) 프로필
장기효(캡틴판교) 1달 전

윤희님, 위 코드에 보면 삭제 버튼을 눌렀을 때 동작하는 removeTodo 메서드에 this.todoItems.splice() 쓰고 계시네요. 그런데 이 컴포넌트에는 todoItems 라는 데이터 속성이 정의되어 있지 않아 에러가 나는 것 같습니다. 다시 한번 확인해보시겠어요? :)

원윤희 프로필
원윤희 1달 전

원윤희 프로필
원윤희 1달 전

목록이 나타나질 않습니다ㅠ

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스