从按钮关闭 Vue 模式答案

【问题标题】：Vue close modal from a button从按钮关闭 Vue 模式
【发布时间】：2020-10-05 08:53:01
【问题描述】：

我使用bootstrap-vue 作为模态。当我单击按钮OPEN MODAL 时，它会打开包含页脚按钮OK 和CANCEL 的模式。这些按钮关闭模式，因为它来自 bootstrap-vue 的预定义代码。

我试图在名为CLOSE MODAL USING THIS BUTTON 的模态中添加按钮，这应该是关闭模态但它没有。有没有办法让CLOSE MODAL USING THIS BUTTON 退出模态？

查看

<div id="app">
  <b-button v-b-modal.modal-scrollable variant="info" v-on:click="opensModal">Open Modal</b-button>

  <b-modal id="modal-scrollable" scrollable title="Waiver Legal" v-show="!displayModal">
    <p class="my-4">
      "Contains modal detail"
    </p>

      <b-button variant="info" data-dismiss="modal-scrollable" v-on:click="closeModal">CLOSE USING THIS BUTTON</b-button>
      <br>

    </b-modal>
</div>

脚本

new Vue({
  el: "#app",
  data: {
    clickOnButton: true,
    displayModal: true
  },
  methods: {
    opensModal(){
     this.clickOnButton = false; <!-- it opens the modal -->
    },
    closeModal(){
        this.displayModal = false; <!-- it does not close -->
    }
  }
})

下面是JSFIDDLE上面代码的链接

https://jsfiddle.net/ujjumaki/z1ndL65r/18/

【问题讨论】：

标签： twitter-bootstrap vue.js bootstrap-vue

【解决方案1】：

你可以使用bootstrap-vue提供的内置this.$bvModal.hide(id)。

所以不是...

<b-button variant="info" data-dismiss="modal-scrollable" v-on:click="closeModal">CLOSE USING THIS BUTTON</b-button>

改为这样做...

<b-button variant="info" @click="$bvModal.hide('modal-scrollable')">CLOSE USING THIS BUTTON</b-button>

这样，您就不需要额外的close modal 方法了。

编辑

实际上，您不需要整个 method 块。也可以取出数据项。

您的代码应该可以正常工作...

<div id="app">
  <b-button v-b-modal.modal-scrollable variant="info" >Open this Modal</b-button>

  <b-modal id="modal-scrollable" scrollable title="Waiver Legal" v-show="!displayModal">
    <p class="my-4">
      "Contains modal detail"
    </p>

      <b-button variant="info" @click="$bvModal.hide('modal-scrollable')">CLOSE USING THIS BUTTON</b-button>
      <br>

    </b-modal>
</div>

脚本...

new Vue({
  el: "#app"
})

这不是更干净吗？ ;D

【讨论】：

【解决方案2】：

Insted 我使用了另一种解决方案，即 b-modal 的 v-model 属性来显示和隐藏模态。

<div id="app">
  <b-button @click="openModal()" variant="info" >Open this Modal</b-button>

  <b-modal id="modal-scrollable" scrollable title="Waiver Legal" v-modal="popUp">
    <p class="my-4">
      "Contains modal detail"
    </p>

      <b-button variant="info" @click="closeModal()">CLOSE USING THIS BUTTON</b-button>
      <br>

    </b-modal>
</div>

...在脚本内部创建方法

openModal(){
  this.popUp = true;
}

closeModal(){
  this.popUp = false;
}

【讨论】：