Question

我正在使用vue2中的1个组件= 1文件样式进行开发。

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

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

这些按钮触发bootstrap-modal。

我正在使用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)
}

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

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

Answer 1

您应该已经解决了问题，但是对于以后的尝试，这是我的看法。我有一个类似的问题。就我而言，问题是v-if用于初始化模态内部的组件。如果您将v-if更改为h4和b-container标签，我相信。

Answer 2

您可以使用v-on:click="details(row.item,row.index,$event.target)"代替@click.stop="details(row.item,row.index,$event.target)"吗？或者我得到了所有可怕的东西：）

Answer 3

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

date

Answer 4

您可以使用延迟来进行一些变通。

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

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

4 个答案: