리스트 제거 전 경고창이 나오도록 만들어 보았는데요
해결됨
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
삭제 버튼을 누를 시 모달창이 뜨면서 해당 리스트가 'toDelete'에 저장되고, 모달창에서 '진행하기' 버튼을 누르면 'toDelete'에 저장된 리스트를 지우는 방식으로 해결하였습니다. 일단 지금 코드만으로도 원하는 대로 작동도 잘 되긴 하는데, 모달창과 트렌지션 그룹이 각기 분리되어 있어, 트랜지션 그룹 내부 li에 선언된 반복문 index와 해당 인덱스가 지닌 값 addedItem 을 직접 모달창에서 받을 수 있도록 전달하는 방법을 몰라서 이렇게 했는데, 혹시 방법이 있을까요? 만약 전달이 가능하다면 toDelete라는 객체를 굳이 선언할 필요가 없고 코드가 더 깔끔해지지 않을까 싶네요. 아니면, 더 깔끔한 방법은 없을지? 몇 차례의 시도 중에 li 안에 모달창을 선언하는 것도 해봤는데, 그렇게 하니까 모달창이 storedItem의 개수만큼 늘어나는데다 작동이 안되네요. 아래는 코드입니다. <template> <div> <transition-group name="list" tag="ul"> <li v-for="(addedItem, index) in this.storedItems" v-bind:key="addedItem.item"> <span v-on:click="toggleComplete({addedItem, index})" v-bind:class="{checkCompleted: addedItem.completed}">완료</span> <span v-bind:class="{textCompleted: addedItem.completed}">{{addedItem.item}}</span> <span class="remove" v-on:click="showDeleteInfo(addedItem, index)">삭제</span> </li> </transition-group> <DeleteModal v-if="showModal2" @close="showModal2 = false"> <h3 slot="header"> 경고! <i class="closeModalBtn fas fa-times" @click="showModal2 = false, cancelDeletion()"></i> </h3> <p slot="body"> {{toDelete.value.item}}의 삭제를 진행하시겠습니까?<br> 이 작업은 되돌릴 수 없습니다. </p> <button slot="deleteInfo" v-on:click="removeItemByModal()" @click="showModal2 = false"> 진행하기 </button> </DeleteModal><!--리스트 삭제 경고 모달창--> </div> </template> <script> import { mapGetters, mapMutations } from 'vuex' import DeleteModal from './common/Modal.vue' // 트랜지션 모달 임포트 export default { data(){ return{ toDelete:{ value:'', indexOfValue:'' }, // 삭제 버튼을 누른 리스트의 정보를 담는 곳 showModal2: false, } }, methods:{ showDeleteInfo(addedItem, index){ this.toDelete.indexOfValue = index; // 삭제 버튼을 누른 리스트의 인덱스 this.toDelete.value = JSON.parse(sessionStorage.getItem(addedItem.item)); // 삭제 버튼을 누른 리스트가 가진 정보 this.showModal2 = !this.showModal2; // 모달창 토글 console.log(this.toDelete); }, cancelDeletion(){ // 취소 시 저장된 정보 제거 this.toDelete.indexOfValue = ''; this.toDelete.value = ''; console.log(this.toDelete); }, ...mapMutations({ removeItems: 'removeOneItem', toggleComplete: 'toggleOneItem' }), removeItemByModal(){ sessionStorage.removeItem(this.toDelete.value.item); this.storedItems.splice(this.toDelete.indexOfValue, 1) // 삭제 대기로 저장된 리스트 제거 }, }, computed:{ ...mapGetters(['storedItems']) }, components:{ DeleteModal } } </script>
- 컨펌창
- vuex
- es6
- vuejs
- javascript