How to listen to events from bootstrap-vue modal?

Question

I have two modals in my page and I need a way to listen to 'ok' event when pressing ok button on first modal and respond by opening the another modal. There are no examples in the documentation: https://bootstrap-vue.js.org/docs/components/modal/

I wanted to use this listener but nothing is explained and I couldn't find out what is what here.

export default {
  mounted() {
    this.$root.$on('bv::modal::show', (bvEvent, modalId) => {
      console.log('Modal is about to be shown', bvEvent, modalId)
    })
  }
}

This is the relevant part of my code:

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

and add-post component code is

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

So when I click on ok (next) in add-post component I want the second modal to pop up.

Solution

it's right on the bottom of the documentation under Events

basicly use

@ok="yourOkFn"

Comments

[Mohammd Dawod]

i used this method okFn(){ this.$refs['modal-center-add-content'].show() }

[Mohammd Dawod]

and added refrence to model2 : ref="modal-center-add-content"