gpt4 book ai didi

vue.js - 如何从 bootstrap-vue 模态监听事件?

转载 作者:行者123 更新时间:2023-12-04 14:08:45 24 4
gpt4 key购买 nike

我的页面中有两个模态,我需要一种方法来在第一个模态上按下 ok 按钮时收听 'ok' 事件,并通过打开另一个模态来响应。
文档中没有示例:
https://bootstrap-vue.js.org/docs/components/modal/
我想使用这个监听器,但没有解释,我无法找到这里是什么。

export default {
mounted() {
this.$root.$on('bv::modal::show', (bvEvent, modalId) => {
console.log('Modal is about to be shown', bvEvent, modalId)
})
}
}
这是我的代码的相关部分:
<div>
<b-modal id="modal-center-add-post" style="width: 120px" centered class="h-50 d-inline-block min-vw-100" ok-title="next" >
<add-post></add-post>
</b-modal>
</div>
<div>
<b-modal id="modal-center-add-content" style="width: 120px"
centered class="h-50 d-inline-block min-vw-100"
ok-only ok-title="Create" >
<add-content></add-content>
</b-modal>
</div>
和添加后组件代码是
<template>
<form>
<div class="form-group row">
<label for="title"
class="col-sm-2 col-form-label">
Title
</label>
<div class="col-sm-10">
<input type="text"
class="form-control"
id="title"
placeholder="Title">
</div>
</div>
<div class="form-group row">
<label for="chooseTopic"
class="col-sm-2 col-form-label">
Topic
</label>
<div class="col-sm-10">
<select id="chooseTopic" class="form-control">
<option selected>Leadership</option>
<option>HR</option>
<option>Sales</option>
<option>Marketing</option>
</select>
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0"> Type</legend>
<div class="col-sm-10">
<div class="form-check-inline ">
<label class="form-check-label"
for="video"
:class="{'checked':(isChecked==='video')}"
@click="isChecked='video'">
<input class="form-check-input"
type="radio" name="video"
id="video"
v-model="postingType"
value="video" checked>
<i class="fab fa-youtube "></i>
Video
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label"
for="ebook"
:class="{'checked':(isChecked==='ebook')}"
@click="isChecked='ebook'">
<input class="form-check-input"
type="radio"
name="ebook"
id="ebook"
v-model="postingType"
value="ebook">
<i class="far fa-file-pdf "></i>
Ebook
</label>
</div>
<div class="form-check-inline ">
<label class="form-check-label "
for="article"
:class="{'checked':(isChecked==='article')}"
@click="isChecked='article'">
<input class="form-check-input " type="radio"
name="article" id="article"
v-model="postingType" value="article" >
<i class="fas fa-pen-square "></i>
Article
</label>
</div>
</div>
</div>
</fieldset>

</form>
</template>

<script>
export default {
name: "AddPost",
data(){
return{
postingType:'',
isChecked:'video'
}
},
}
</script>

因此,当我在 add-post 组件中单击确定(下一步)时,我希望弹出第二个模式。

最佳答案

它就在 Events 下的文档底部

基本使用

@ok="yourOkFn"

关于vue.js - 如何从 bootstrap-vue 模态监听事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55707243/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com