Question

我正在使用vue2和bootstrap 3，我想显示一个包含表单的模态。我在UsersPage.vue中有以下代码

<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"></b-form-input>
    </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或bootstrap中的一个错误。当我把它放在我的造型中时，模态显示：

.modal-open {
  opacity: 0.6 !important;
}

.modal-open .modal {
  opacity: 0.9 !important;
}

Bootstrap 3 Modal不显示vue 2

0 个答案: