반응형
부트스트랩 3 모달은 vue 2와 함께 표시되지 않음
vue2와 부트스트랩3을 사용하고 있는데 폼이 포함된 모드를 표시하고 싶습니다.Users Page에는 다음 코드가 있습니다.표시하다
<b-btn variant="primary" @click="displayAddUser" >
Add user
</b-btn>
<!-- Modal Component -->
<b-modal id="editModal" :title="editModalTitle" :visible="displayEditModal">
<form @submit.stop.prevent="submit">
<div class="form-group">
<b-form-input type="text" placeholder="Enter name" v-model="user.name"/>
</div>
</form>
</b-modal>
<스크립트> 섹션에는 다음과 같은 내용이 있습니다.
<script>
export default {
data: () => ({
displayEditModal: false,
editModalTitle: 'Add user'
}),
methods: {
displayAddUser() {
this.displayEditModal = true
this.editModalTitle = 'Add user'
},
... rest of the code
v-b-modal에서도 이 버튼을 사용해 보았습니다.
<b-btn v-b-modal.editModal>Open</b-btn>
그것도 효과가 없었어요.Vue 스트랩을 써봤어요.하지만 모달 닫혔을 때 vue2에서 양방향 바인딩이 더 이상 작동하지 않는다는 오류가 발생했습니다.지금까지 사용한 소프트웨어 중 가장 불가능하고 vuejs가 더 심플할 것 같아서 리액션을 남겼습니다.
어떻게 하면 간단한 모달이나 B모달을 표시할 수 있을까요?
업데이트:
vue2 또는 부트스트랩에서 버그를 발견한 것 같습니다.이것을 스타일링에 넣으면 모달은 다음과 같이 표시됩니다.
.modal-open {
opacity: 0.6 !important;
}
.modal-open .modal {
opacity: 0.9 !important;
}
언급URL : https://stackoverflow.com/questions/45032136/bootstrap-3-modal-doesnt-show-with-vue-2
반응형
'source' 카테고리의 다른 글
Java 8에서 Stream을 캐스팅할 수 있습니까? (0) | 2022.08.20 |
---|---|
uint32와 uint32_t의 차이점 (0) | 2022.08.20 |
상위 구성 요소에서 하위 속성 변경 내용을 보는 방법 (0) | 2022.08.20 |
이 날짜 형식은 무엇입니까?2011-08-12T20:17:46.384Z (0) | 2022.08.20 |
웹 소켓 돌연변이를 사용하여 vuex를 구성하는 방법 (0) | 2022.08.20 |