v-for 내부에 modal을 오픈하는 button이 있는데, button 클릭시에 원하는 데이터의 modal 뿐만 아니라 다른 modal들이 중복으로 오픈되고 있습니다.

Question

안녕하세요.vue를 이용하여 화면을 개발하고 있는 초보 개발자입니다.제가 구현하려는 기능 중에,v-for 내부에 있는 버튼을 클릭하면 modal을 오픈하는 기능이 있는데,해당 버튼을 클릭하면 v-for 내부의 데이터 수만큼 modal을 중복하여 띄우고 있습니다. 구글링 해보았을때 button 부분을 v-for문 밖으로 빼라는 내용들이 있었는데, 현재 제 소스 구조에서 적용이 불가능해보여 한참을 고민하다가 여기에 글을 올려보게 되었습니다.혹시 관련하여 아시는 분이 계시다면 답변 부탁드립니다. openProductDiscountBarcodeModal() { this.$modal.show( "ProductDiscountBarcodePopup", {}, { name: "ProductDiscountBarcodePopup", classes: "fullPageModal", overlayTransition: "noFade", root: this.$root } ); }, ProductDiscountBarcodePopup.vue

EmDev · Accepted Answer

<product-discount-barcode-popup :brand&#61;&#34;item.brand&#34; :name&#61;&#34;item.name&#34; />이게 모달이죠?이걸 for문 밖으로 빼서 어딘가에 하나만 놔두면 되지 않나요?

아름다운vue · Answer

밖으로 모달을 빼도 동일하게 여러개의 창이 뜨고 있습니다..!

코딩찡찡이 · Answer

일단 모달은 ul li 내부에 있을 필요가 전혀 없습니다. 더더욱이 for문으로 여러개 만들 필요도 없구요.두번째로 &#64;click.self 혹은 &#64;click.prevent 시도해 보시길 바랍니다.

아름다운vue · Answer

두분 답변 감사합니다.제가 첫번째 컴포넌트를부모 컴포넌트에서 또 여러번 띄우고 있어서<li> 밖으로 빼도 첫번째 컴포넌트 개수 만큼 팝업이 노출되고 있었습니다.첫번째 컴포넌트를 1개만 사용하니 정상적으로 팝업 노출됩니다.감사합니다.

v-for 내부에 modal을 오픈하는 button이 있는데, button 클릭시에 원하는 데이터의 modal 뿐만 아니라 다른 modal들이 중복으로 오픈되고 있습니다.

4개의 답변

#v-for 목록