리스트 삭제 효과

Question

안녕하세요 강사님 리스트에서 항목 한개를 삭제했을 떄 효과가 저랑 강사님이랑 달라서 문의드립니다..! 예를들어 리스트가 1, 2, 3, 4, 5 라는 5개의 리스트가 있을 때 첫 번째 리스트의 휴지통 아이콘을 클릭하면 강사님은 첫 번쨰 리스트의 위치에서 사라진다면 저는 다섯번째 (마지막줄) 리스트에 삭제 효과가 들어가고 1번이 삭제됩니다..ㅠㅠ 어떤 부분을 확인해봐야할까요..? (TodoList.vue) < template > < div > < transition-group name = "list" tag = "ul" > < li v-for ="( todoItem , index ) in this . $store . state . todoItems " v-bind : key =" index " class = "shadow" > < i class = "checkBtn fas fa-check" v-bind : class ="{ checkBtnCompleted: todoItem . completed }" v-on : click =" toggleComplete ( todoItem , index )" > < span v-bind : class ="{ textCompleted: todoItem . completed }" > {{ todoItem . item }} < span class = "removeBtn" v-on : click =" removeTodo ( todoItem , index )" > < i class = "fas fa-trash-alt" > < script > /* eslint-disable no-console */ export default { methods: { removeTodo ( todoItem , index ){ // this.$emit('removeItem', todoItem, index); this . $store . commit ( 'removeOneItem' , { todoItem , index }); }, toggleComplete ( todoItem , index ){ // this.$emit('toggleItem', todoItem, index) this . $store . commit ( 'toggleOneItem' , { todoItem , index }) } } } < style scope > ul { list-style-type : none ; padding-left : 0 ; 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 { margin-right : 5px ; line-height : 45px ; color : #62acde } .checkBtnCompleted { color : #b3adad } .textCompleted { text-decoration : line-through ; color : #b3adad } /* 리스트 아이템 트렌지션 효과 */ .list-enter-active , .list-leave-active { transition : all 1s ; } .list-enter , .list-leave-to /* .list-leave-active below version 2.1.8 */ { opacity : 0 ; transform : translateY ( 30px ); }

캡틴판교 · Answer

안녕하세요 아라님, 올려주신 코드는 크게 문제가 없으신 것 같고 다만 리스트에 데이터가 중복되서 들어가는 경우에 엉뚱한 리스트가 삭제되는 것처럼 보이는 것 같네요. 데이터 추가하는 코드에 중복 관련 처리 해주시고 리스트의 데이터가 중복되지 않는 상황에서 다시 한번 해보시겠어요? :)