splice

Question

오류는 뜨지 않는데 목록이 나타나질 않아요. 어떻게 해야 할까요? splice 주석 달고 실행하면 목록이 나타나는데 주석을 지우면 목록이 나타나질 않아요.

univue · Answer

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

univue · Answer

<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>  </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 : 0 px ; margin-top : 0 ; text-align : left ; } li { display : flex ; min-height : 50 px ; height : 50 px ; line-height : 50 px ; margin : 0.5 rem 0 ; padding : 0 0.9 rem ; background : white ; border-radius : 5 px ; } . removeBtn { margin-left : auto ; color : # de4343 ; } . checkBtn { line-height : 45 px ; color : # 62acde ; margin-right : 5 px ; } . checkBtnCompleted { color : # b3adad ; } . textCompleted { text-decoration : line-through ; color : # b3adad ; } </style>

goqudeo969 · Answer

위 소스에서 <li> 태그에서 {{ todoItem.item }} 이 아니라 {{ todoItem }} 로 하면 나올거 같은데요

univue · Answer

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

univue · Answer

captain · Answer

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

captain · Answer

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