initialSelected is not working

[MicroDreamIT]

I am getting weirded activity, initial selected is not working on load or before click. After click its working good

[mazipan]

Can you see my demo page here
https://mazipan.github.io/vue-select-image/

It's working, you can see on multiple selection

[MicroDreamIT]

how it works, how can i make it happen? I have tried but did not work, but its working after i click.

[mazipan]

Here the code in demo page

https://github.com/mazipan/vue-select-image/blob/master/demo/app.js#L68

[mazipan]

here the code how i set initial selection

https://github.com/mazipan/vue-select-image/blob/master/src/VueSelectImage.vue#L149

[MicroDreamIT]

wow, let me check

[MicroDreamIT]

I have tried initialSelected with your example, its working on load not but not with other event. I am getting image data from server and pushing it to initialSelected but this not working, I am using vue-dropzone.

here is my code sample, vsuccess method represent after upload from dropzone. I am looking forward to select image which is just uploaded.

//template
<vue-select-image :dataImages="userFiles"
                                                  :is-multiple="true"
                                                  :selectedImages="initialSelected"
                                                  :useLabel="true"
                                                  @onselectmultipleimage="onSelectMultipleImage">
                                </vue-select-image>


// methods 
vsuccess(file, response){

                response.src = '/storage/' + response.path + '/' + response.original_file_name
                response.alt=response.original_file_name
                this.userFiles.push(response)
                this.initialSelected.push(response)
                // console.log(this.initialSelected)
            },

But it worked if i add this using ref

 let component = this.$refs.userImageSelect
                component.setInitialSelection()

[mazipan]

Yes, because initialselsection is on mounted hook.
And not sync with props value.
Need to revisit my code if wanna support async loading initialselsection.

Thanks for reporting this case

[MicroDreamIT]

even initialSelected is not working in created() method.

[chris-aeviator]

check that your ID matches
check that your ID is a string
check that your src matches

If all of those are equal in dataImages & selectedImages it will reactively select images even on a async api request

edit:

for me it was an issue with an S3 signature which differed, it would be clever to only rely on the ID rather than ID, alt & src beeing the same for S3

[askdesigners]

I would actually extend this issue to allow for setting the initial value only by the true "value", which in this component is "id". It's not often that you'd be storing whole objects in your DB, so having to rehydrate an entire object just to get pre-selection working is problematic. Ideally an array of objects just with "id" props would be enough.

[djom202]

Hi,

How I can use the this.$refs with this pluggin? I'm trying to use the next script but it's not working since userImageSelectis not defined:

let component = this.$refs.userImageSelect

[Aky22]

Hi,

How I can use the this.$refs with this pluggin? I'm trying to use the next script but it's not working since userImageSelectis not defined:

let component = this.$refs.userImageSelect

You should define a ref value to the component. In your case, it look like this:
<vue-select-image ref="userImageSelect" />

If you do that, then you can reference the component.