I have a collection of images displayed in a grid, and I want to be able to select one of them to update the value with the chosen image. Before proceeding with the update, I need a confirmation prompt to ensure the user wants to proceed or cancel the action.
How can I update the value of "this.backGroundUrl" in the following method with the newly 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>
Confirmation 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 () {
// Need to set this.currentConnect.backGroundUrl to the selected image
this.confirmDialog = false
}