Vue의 동일한 구성 요소에 있는 여러 모달 상자를 프로그래밍 방식으로 렌더링

Question

내 구성 요소에는 콘텐츠가 다른 세 가지 팝업 모달이 있습니다. 특정 버튼을 클릭하면 해당 팝업 모달을 열어야 합니다.

내가 하고 있는 일이 바로 이것이다 버튼 1의 경우 -

<s-button type="button" class="bl_btn" @click="onClickProdOpen">
      제품 세부 정보
  </s-버튼>

이 모달 1의 경우

<s-modal v-model="isShowPopup1" :title="$t('LBL_PROD_CONT')"
    <내 구성요소-1
         :pageId ="this.$options.name"
         :popupDefaultTab="popupOpenDefaultTab"
         :onClickClose="onClickclose"
    //>

버튼 클릭 방법은 다음과 같습니다. 이와 같은 여러 다른 모달 상자에 대한 클릭 이벤트입니다.

메서드: {
  onClickProdOpen() {
   this.isShowPopup1 = 사실;
   this.popupOpenDefaultTab = 0;
}
}

그렇다면 모달 상자 코드를 여러 번 반복하지 않고 내부 콘텐츠 구성 요소만 변경하기 위해 스위치 케이스 문을 어떻게 사용할 수 있습니까? 어떤 제안이라도 도움이 될 것입니다.

Answer 1

한 가지 옵션은 각 모달의 상태를 객체에 넣는 것입니다. 이렇게 하면 각 모달에 데이터 속성을 추가할 필요가 없습니다.

모달 내부의 내용이 충분히 유사하다면, 같은 방식으로 인덱스를 키로 사용하여 v-for를 사용할 수 있습니다.

으아악 으아악

https://codepen.io/timfranklin/pen/abWEwLy?editors=1111