boostrap vue open modal in child component
Parent.vue
<template>
<button @click="openModal()">Open Child Component</button>
<child-component-with-modal ref="childComponent">
</child-component-with-modal>
</template>
<script>
export default {
data() {..}
methods: {
openModal(){
//access the childComponent via ref
//access its children and use the correct index for
//your targeted boostrap vue modal
//use the show property which is the boostrap show method
this.$refs.childComponent.$children[0].show();
//sometimes it helps to console log the ref to see all
//available properties of ref element and its children
console.log(this.$refs.childComponent);
}
}
}
</script>
Single File Component Child.vue
<template>
<div>
...
</div>
<b-modal @ok="confirmed()" @cancel="canceled()" @close="canceled()">
</b-modal>
</template>
<script>
export default {
data() {..}
methods: {...}
}
</script>