模态仅在第二次单击后显示

Posted 2023-02-23

【中文标题】模态仅在第二次单击后显示

【英文标题】：Modal only showing after the second click

【发布时间】：2018-04-29 22:39:39

【问题描述】：

我正在 vue2 中开发 1 个组件 = 1 个文件样式。

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

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

这些按钮触发引导模式。

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

<b-modal  v-if='toShow' id="modalallergy" @hide="resetModal">
      <h4 class="my-1 py-1" slot="modal-header">Allergie  modalDetails._id </h4>
      <b-container class="bv-example-row">
            <b-row>
                <b-col>
                  identifiant : modalDetails.data.content
                </b-col>
                <b-col>
                Catégorie : modalDetails.data.content
                </b-col>
            </b-row>
            </b-container>
    </b-modal>

    <b-modal id="modalallergy-edit" @hide="resetModal">
      <h4 class="my-1 py-1" slot="modal-header">Edition de l'allergie  modalDetails._id </h4>
      <pre> modalDetails.data</pre>
    </b-modal>

这是我的模式，就在上面我有我的按钮：

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

在<script> 和methods 部分下面我有我的电话：

details (item, index, button) 
  this.modalDetails.data = item
  this.modalDetails.index = index
  this.modalDetails._id = item.content._id
  this.$root.$emit('bv::show::modal', 'modalallergy', button)

问题是只有第二次点击按钮才会触发模态打开。 （表格的属性还没有水合 - 至少从按钮和模态的角度来看还没有。）

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

【问题讨论】：

你为什么打电话给@click.stop？我认为您不必担心您所描述的组件的传播。

只是想办法解决它。它没有用。

您能否在问题中包括vue 内容中methods 部分之前的其他内容？会有帮助的

【参考方案1】：

您可以使用延迟来解决一些问题。

this.myVar = someThing;
setTimeout(function() 
  $('#mymodal').modal('show');
, 100);

【参考方案2】：

你应该已经解决了这个问题，但对于未来的尝试，这是我的意见。我有一个类似的问题。在我的情况下，问题是用于初始化模态内组件的 v-if。我相信如果您将 v-if 更改为 h4 和 b-container 标签会起作用。

【参考方案3】：

查看您的代码，我不确定，但您可以尝试

details (item, index, button) 
  this.modalDetails.data = item
  this.modalDetails.index = index
  this.modalDetails._id = item.content._id
  this.$root.$emit('bv::show::modal', 'modalallergy', button)
  this.$root.$emit('bv::show::modal', 'modalallergy', button)

【讨论】：

我将其标记为答案，因为我不希望一半或全部分数消失，但这并没有解决我的问题。

【参考方案4】：

你能用v-on:click="details(row.item,row.index,$event.target)" 代替@click.stop="details(row.item,row.index,$event.target)" 吗？或者我得到的一切都非常糟糕:)