Twitter bootstrap Vue从按钮关闭模式

我使用的是

bootstrap vue

作为模式。当我点击按钮

openmodel

时，它会打开包含页脚按钮的模式，显示为

OK

和

CANCEL

。这些按钮关闭模式，作为引导vue中的预定义代码

我尝试使用此按钮在名为

关闭模式的模式中添加按钮，该按钮假定会关闭模式，但不会。是否有一种方法可以使用此按钮关闭模式

查看

<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 -->
    }
  }
})

newvue({
el:“应用程序”，
数据：{
clickOnButton:true，
displayModal:正确
},
方法：{
opensModal（）{
this.clickOnButton=false；
},
closeModal（）{
this.displaymodel=false；
}
}
})

下面是
JSFIDDLE

您可以使用bootstrap vue提供的内置
this.$bvmodel.hide（id）

所以不是

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

脚本

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

那不是更干净吗；D
您可以使用bootstrap vue提供的内置
this.$bvmodel.hide（id）

所以不是

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

脚本

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

那不是更干净吗；D
相反，我使用了另一种解决方案，即b模式的
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>

相反，我使用了另一种解决方案，即b模式的
v模式
属性来显示和隐藏模式

<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>