search

advanced-cropper / vue-advanced-cropper

The advanced vue cropper library that gives you opportunity to create your own croppers suited for any website design
https://advanced-cropper.github.io/vue-advanced-cropper/
Other
977 stars 132 forks source link

Cropper src uses other cropper components data #186

Closed ataldev closed 2 years ago

ataldev commented 2 years ago

I have used the cropper in a component called ImageSelector. In this component I can choose multiple files as input, I display them on screen. Users can click the edit button next to each image, a modal will appear and the selected image will be the src of the cropper component. (clicking the edit button sets the toBeEdited data variable to the selected image) This works fine when I use the ImageSelector component once on a page. But when I use the ImageSelector Component twice, when clicked on an edit image button, the toBeEdited data variable of the second component changes, but the cropper src is always taken from the toBeEdited data variable of the first component. I know it is confusing to understand. I made a sandbox for it, here is the link: https://codesandbox.io/s/charming-payne-7psuhb

Page 1_ImageSelector (has data variable toBeEdited)
__Cropper (src is toBeEdited.image)
2_ImageSelector (has data variable toBeEdited)
__Cropper (src is FIRST ImageSelector's toBeEdited.image)
Norserium commented 2 years ago

@depressedpsychiatrist, hello again!

It's not the cropper issue. The problem is that you open the same modal in the each of ImageSelector instances. The first one. You can solve this issue by using refs to open a modal, not the id, because the id is the same for all modal instances.

Example.

ataldev commented 2 years ago

A silly mistake by me, laughed so hard when realized it. Thanks so much for your time.

Norserium commented 2 years ago

@depressedpsychiatrist, you are welcome!