模态对话框 – 仅在第二次单击后显示的模态

前端之家收集整理的这篇文章主要介绍了模态对话框 – 仅在第二次单击后显示的模态前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用vue2中的1 component = 1文件样式进行开发.

我有一个通过Bootstrap-Vue表组件构建的表,我正在使用提供程序向它传递一个项目.

其中一列包含每行的修改按钮.

这些按钮触发bootstrap-modal.

我正在使用V-if来初始化表及其属性.

  1. <b-modal v-if='toShow' id="modalallergy" @hide="resetModal">
  2. <h4 class="my-1 py-1" slot="modal-header">Allergie {{ modalDetails._id }}</h4>
  3. <b-container class="bv-example-row">
  4. <b-row>
  5. <b-col>
  6. identifiant : {{modalDetails.data.content}}
  7. </b-col>
  8. <b-col>
  9. Catégorie : {{modalDetails.data.content}}
  10. </b-col>
  11. </b-row>
  12. </b-container>
  13. </b-modal>
  14.  
  15. <b-modal id="modalallergy-edit" @hide="resetModal">
  16. <h4 class="my-1 py-1" slot="modal-header">Edition de l'allergie {{ modalDetails._id }}</h4>
  17. <pre>{{ modalDetails.data}}</pre>
  18. </b-modal>

这是我的模态,就在上面我有我的按钮:

  1. <button class="btn btn-xs btn-success" @click.stop="details(row.item,row.index,$event.target)">
  2. <span class="glyphicon glyphicon-search"></span>
  3. </button>

及以下< script>和方法部分我接到我的电话:

  1. details (item,index,button) {
  2. this.modalDetails.data = item
  3. this.modalDetails.index = index
  4. this.modalDetails._id = item.content._id
  5. this.$root.$emit('bv::show::modal','modalallergy',button)
  6. }

问题是只有第二次点击按钮才会触发模态打开. (桌子的属性还没有水合 – 至少从按钮和模态的角度来看不是这样.)

我也尝试使用布尔值并手动传递参数,但在这种情况下它根本不打开.

解决方法

检查您的代码,我不确定,但您可以尝试
  1. details (item,button)
  2. this.$root.$emit('bv::show::modal',button)
  3. }

猜你在找的Bootstrap相关文章