Vue bootstrap Modals

Example of how to use modals, using the slots for easy reusability, in this example i want to call this component “modal” every time I click in delete button, to confirm if i really want to delete the object…

And resolving the opacity problem of bootstrap.

Modal To confirm delete ModalToConfirm.vue

<template>
 
 <b-col align-h="center">
      <b-button @click="$bvModal.show('ModalToDelete')" variant="light" block style=" border-color: #ff0000;color: #ff0000;margin: 5px">Delete</b-button>
<b-modal id="ModalToDelete" hide-footer title="Confirmation" :header-text-variant="headerTextVariant" header-class="backcolor" >
  <div class="modal-window" style="padding: 20px">
 
  <p>Are you sure? Want to delete <strong v-if="name">{{ name }}</strong> ?</p>
  
  <div class="actions">
  <button type="button" class="btn btn-primary" @click="$bvModal.hide('ModalToDelete')">Anular</button>
 <slot name="deleteButton"/>
  
  </div>
  </div>
  
  </b-modal>
 </b-col>
</template>
 
 <script>
 
 
 export default {
 name: 'ModalToDelete',
 props:{
  name: String, //this name is not necessary, is here only to the modal show to user, what his is about to delete
  },
 components: {
 
 },
 data(){
 return {
  headerTextVariant: 'light',
  }
 },
 methods: { 
 
 onCancel(){
  console.log("click on cancel");
  },
 
 },
 
 async mounted () { 
 
 console.log('Component modalToDelete mounted.');
 },
 }
 </script>
 
 <style scoped> 
//this resolve the opacity problem, don't forget to add header-class="backcolor" in the b-modal
 /deep/ .backcolor {
 background: red ;
 color: white;
}
/deep/ .modal-backdrop
{
 opacity:0.8 !important;
}
</style>

Now, we have the component with a modal, the next step is do create a parent component, witch will call the component ModalToDelete…

Modal Parent in this case ProductShow.vue

<template>
 
 <b-container fluid style="padding: 0px; margin: 0px" >
<b-row v-if="product" style="margin: 0px;padding: 3vw; padding-top: 4vw" align-h="start">
<h3>product</h3>
 <h5>{{product}}</h5> // show the object product
<ModalToDelete :name="product.name" >
   <template slot="deleteButton">
    <button type="button" class="btn btn-danger" @click="onConfirmDelete">Confirmar</button>
   </template>
  </ModalToDelete>
</b-row>
</b-container>
</template>
 
<script>
import ModalToDelete from "@/components/ModalToDelete";
export default {
 name: "ProductShow",
 components: {
 
  ModalToDelete,
 },
 props: {
  product: { type: Object, default: null },
 },
 data() {
  return {
  loading: false,
};
 },
 watch: {
},
 computed : {
},
 async created() {
 console.log("Created ProductShow");
},
 methods: {
 
 async onConfirmDelete(){ //this is called if on modal you agreed to delete the object

  try {
  this.loading = true;
//PS: to delete the object i'm using the vuex orm plugin
Product.api().delete('product/'+this.productId,{delete: this.productId});
  
  this.$bvModal.hide('ModalToDelete') //this is to close modal after delete
  } catch (e) {
 
  this.error = e.message
  console.log(e)
  } finally {
 this.loading = false
 }
}, 
 
 },
 mounted () {
 console.log("Mounted ProductShow");
}
 };
 </script>
<style>
 </style>

Please feel free to comment, or ask for tips, I am here to help…

And please follow my medium, and claps…

Thanks you guys