Answers for "boostrap vue modal set zindex"

boostrap vue modal set zindex

If you are having issues with bootstrap vue setting one modal above another, 
you can manually set the z-index value of a bootstap modal with a Vue ref.

  <b-modal id="modal-1" ref='uniqueName' title="BootstrapVue">
    <p class="my-4">Hello from modal!</p>
  </b-modal>
  
  In the created or mounted Vue lifecycle hook you can set the z-index value.
  
  mounted(){
  	this.$refs.uniqueName.modalOuterStyle.zIndex = 9999;
    
    or for a dynamically named modal ref use bracket notation
    
    this.$refs[uniqueName]modalOuterStyle.zIndex = 9999;
  }
  
  You can alter many of the modal properties. To see a list I like to console log the ref.
  
  console.log(this.$refs.uniqueName)