source

부트스트랩 3 모달은 vue 2와 함께 표시되지 않음

factcode 2022. 8. 20. 18:36
반응형

부트스트랩 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

반응형