initialSelected is not working

[Shahanur Sharif]

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

[Irfan Maulana]

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

It's working, you can see on multiple selection

[Shahanur Sharif]

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

[Irfan Maulana]

Here the code in demo page

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

[Irfan Maulana]

here the code how i set initial selection

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

[Shahanur Sharif]

wow, let me check

[Shahanur Sharif]

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()

[Irfan Maulana]

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

[Shahanur Sharif]

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

[Ryan Cole]

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.

[Jonathan Olier]

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

[Ákos Erős]

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.