I have a grid of images that I want to make a selection from and update the value with the selected image. Before doing so I hope a prompt that just checks if you do want to update or to cancel / dismiss.
What do I need to do to update "this.backGroundUrl" in the method below with the new selected image?
Image grid:
<v-col
v-for="(asset) in assets"
:key="asset._id"
cols="4"
>
<v-img
:src="getThumbnail(asset)"
@click="confirmDialog = true"
/>
</v-col>
Confirm component:
<ConfirmDialog
v-if="confirmDialog"
v-model="confirmDialog"
@cancel="confirmDialog = false"
@confirm="updatedBackgroundImage()"
/>
Assets:
computed: {
...mapState('assets', ['assets']),
Method:
methods: {
getThumbnail (asset) {
return this.getMediaUrl(asset.thumbnailUrl)
},
getMediaUrl (url) {
return process.env.VUE_APP_BACKEND_URL + url
},
updatedBackgroundImage () {
// this.currentConnect.backGroundUrl = ??
this.confirmDialog = false
}
Before you open the dialog, stash the URL.
@click="showDialog(asset)"
showDialog(asset) {
this.theAssetToConfirm = asset
this.confirmDialog = true
}
updatedBackgroundImage () {
this.currentConnect.backGroundUrl = this.theAssetToConfirm
this.confirmDialog = false
}