как слушать события из начальной загрузки? - PullRequest
Новая
       12

как слушать события из начальной загрузки?

0 голосов
/ 16 апреля 2019

Мне нужно модать на моей странице, и мне нужен способ прослушать событие «ОК» при нажатии кнопки «ОК» на первом модале и ответить, открыв другой модал. в документации нет примеров. https://bootstrap -vue.js.org / документы / компоненты / модальные /

Я хотел использовать этот список, но ничего не объяснено, и я не смог выяснить, что здесь 


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>

поэтому, когда я нажимаю кнопку ОК (далее) в компоненте добавления поста, мне нужно второе модальное всплывающее окно.

Надеюсь, объяснение было достаточно ясным

спасибо

1 Ответ

0 голосов
/ 16 апреля 2019

это прямо внизу документации под События

в основном используется 

@ok="yourOkFn"
...