javascript - bootstrap-vue - 基于布尔值显示按钮
问题描述
当我单击时Launch centered modal
,我希望模态隐藏按钮x
,cancel
并且ok
因为 showButton
是错误的。
单击 后show button
,应该显示模式的按钮,因为 nowshowButton
是真的。
我该怎么做?
应用程序.vue
<template>
<div id="app">
<b-button v-b-modal.modal-center>Launch centered modal</b-button>
<b-modal id="modal-center" centered title="BootstrapVue">
<p class="my-4">Vertically centered modal!</p>
<button @click="setShowButton">Show Button</button>
</b-modal>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
showButton: false,
};
},
methods: {
setShowButton() {
this.showButton = true;
},
},
};
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Codesandbox
https://codesandbox.io/s/flamboyant-herschel-62wpt?file=/src/App.vue:0-587
解决方案
您可以使用hide-header-close
和hide-footer
属性。记录在这里。模态文档
<template>
<div id="app">
<b-button v-b-modal.modal-center>Launch centered modal</b-button>
<b-modal
id="modal-center"
centered
title="BootstrapVue"
:hide-header-close="!this.showButton"
:hide-footer="!this.showButton"
>
<p class="my-4">Vertically centered modal!</p>
<button @click="setShowButton">Show Button</button>
</b-modal>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
showButton: false,
};
},
methods: {
setShowButton() {
this.showButton = true;
},
},
};
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
示例 https://codesandbox.io/s/hungry-architecture-zrcqj?file=/src/App.vue
推荐阅读
- sharepoint - sharepoint webpart xlsx 要列出
- logical-operators - 布尔代数:如何证明这个范式方程?
- python - 双向链表的反向实现是如何工作的?
- python - sqlalchemy-flask 应用程序中的属性错误(键),无法连接到数据库
- php - laravel 项目如何在没有路由和控制器的情况下工作?
- php - 如何通过 php 在 mysql 中使用 bcrypt
- mysql - 如何在 MySQL 中连接两个不相关的表?
- python - 如何阅读熊猫的第一列和最后一列?
- c++ - 警告处理为错误这里有什么问题?
- javascript - js如何知道子元素的个数?