Placing VueCropper inside Bootstrap Modal

[domi91c]

In a parent component, I'm using Jquery to open a modal containing VueCropper. VueCropper is initialized before I open the modal, and so it doesn't fit the size of the modal properly.

  openCropModal(file) {
       this.image = file.url;
       $('.js-crop-modal').modal('show');
  },

  <crop-modal :image="image"></crop-modal>

To use Cropper.js inside a modal, it must be initialized after the modal has opened. Is there a way I can do this with VueCropper?

[Agontuk]

If vue-cropper is inside a modal and it is initialized, it means the modal is already mounted, you're just making it visible by calling modal('show'). So modal must be initially unmounted and only mount when calling modal('show'), that way it'll work.

[domi91c]

Can you explain how I can set it up that way? I'm pretty new to Vue.

Thanks for the help by the way.

[Agontuk]

Just using conditional mounting should work, see example here Vue Modal Example. Also there are plenty vue specific modal libraries you can use.

[Agontuk]

Closing due to inactivity.