-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
리스트 제거 전 경고창이 나오도록 만들어 보았는데요
21.02.16 17:02 작성 조회수 513
1
삭제 버튼을 누를 시 모달창이 뜨면서 해당 리스트가 '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>
답변을 작성해보세요.
0
장기효(캡틴판교)
지식공유자2021.02.18
안녕하세요 hhh님, 좋은 질문이네요 :) 보통은 모달 안에 데이터를 넘기는 것보다 모달의 액션을 바깥 컴포넌트에 알려줘서 해당 데이터를 조작하는 것이 더 컴포넌트 활용도를 높일 수 있습니다. 이 부분 유의해서 컴포넌트를 설계해 보시면 좋을 것 같아요! :)
답변 1