vuejs에서 다른 모달 표시 후 모달은 자동으로 숨깁니다.

vuejs에서 다른 모달 표시 후 모달은 자동으로 숨깁니다.

사용하고 있다import bModal from 'bootstrap-vue/es/components/modal/modal';부트스트랩 모달

모달에 사용자 인터페이스가 있는데, 여기서는 드롭다운에서 부서를 선택해야 합니다(AJAX를 사용하여 항목 목록을 가져옵니다).여기서 드롭돈 옆에 있는 버튼을 클릭하여 새로운 부서를 쉽게 추가할 수 있도록 하고 싶습니다. UI를 사용한 팝업모달입니다.

vuejs에서는 메인 모달에 대한 코드가 있습니다.

showModal () {
  this.clearForm();
  this.formInfo.formSubmitted = false;
  this.$refs[this.modalInfo.id].show();
}

잘 되고 있어요.이제 녹색 버튼의 클릭 이벤트를 클릭하면 현재 열려 있는 창 위에 다른 모달도 열립니다.안타깝게도 현재 모달은 숨겨져 있고 새로운 모델이 오픈되어 있습니다.추가 모달에 대한 다음과 같은 코드가 있습니다.

showExtraModal:function(){
    this.$refs['extraModal'].show();
}

vue js에서 이 문제를 해결하려면 어떻게 해야 합니까?

부트스트랩의 제한으로 보입니다(문서 참조).

부트스트랩은 한 번에 1개의 모달창만 지원합니다.중첩된 모달은 사용자 환경이 좋지 않다고 생각되므로 지원되지 않습니다.

부터bootstrap-vue는 부트스트랩의 래퍼일 뿐이며, 같은 제한이 적용됩니다.

부트스트랩에 대해서도 같은 문제가 있었습니다.IIRC는 새로운 부트스트랩을 표시하는 대신 모달의 내용을 변경하여 해결했습니다(Vue-speak: 다른 컴포넌트를 렌더링하는 것).모달 내의 미니루팅과 같은 것입니다.

언급URL : https://stackoverflow.com/questions/49664271/modal-is-hiding-automatically-after-showing-another-modal-in-vuejs