Vue.js open modal by click of a button
How to use a button to show the modal in other components? For example, I have the following components:
info.vue
-
Without jQuery you could create a function on "method:" block like this:
openEditModal(data){ // <handle with your data> this.$root.$emit("bv::show::modal", "your-modal-id"); }讨论(0) -
According to your snippet, you're using a classic Bootstrap modal. You just need to usedata-toggleanddata-targetattributes in that case:<div id="app"> <div class="container"> <button class="btn btn-info" data-toggle="modal" data-target="#exampleModal">show modal</button> <example-modal></example-modal> </div> </div>
Edit
I misread the question so i edit my answer.
It's possible to open the modal with a custom method. You just need to find the element "#exampleModal" by using
refsand then open the modal with a bootstrap method (Bootstrap Programmatic API)<div id="app"> <div class="container"> <button class="btn btn-info" @click="showModal">show modal</button> <example-modal ref="modal"></example-modal> </div> </div>methods: { showModal() { let element = this.$refs.modal.$el $(element).modal('show') } }Fiddle example
讨论(0)
加载中...
- 热议问题