Vue中通过确认弹窗更新选中图片至backGroundUrl的实现方案咨询

你需要新增一个临时变量存储用户选中的图片地址，调整点击逻辑和确认更新逻辑即可，具体修改如下：

• 第一步：在组件data中新增临时存储字段

data() {
  return {
    // 原有变量保留
    confirmDialog: false,
    // 新增：暂存用户选中的背景图地址
    selectedBackgroundUrl: ''
  }
}

• 第二步：修改图片网格的点击事件逻辑，选中图片时先存储地址再弹出确认框

<v-col
  v-for="(asset) in assets"
  :key="asset._id"
  cols="4"
>
  <v-img
    :src="getThumbnail(asset)"
    @click="selectBackground(asset)"
  />
</v-col>

• 第三步：新增选中处理方法、修改确认更新方法

methods: {
  getThumbnail (asset) {
    return this.getMediaUrl(asset.thumbnailUrl)
  },
  getMediaUrl (url) {
    return process.env.VUE_APP_BACKEND_URL + url
  },
  // 新增：选中图片时的处理逻辑
  selectBackground(asset) {
    // 如果需要用原图地址而非缩略图，可替换asset.thumbnailUrl为你业务中对应存储原图路径的字段
    this.selectedBackgroundUrl = this.getMediaUrl(asset.thumbnailUrl)
    this.confirmDialog = true
  },
  updatedBackgroundImage () {
    // 把暂存的选中地址赋值给目标字段
    this.currentConnect.backGroundUrl = this.selectedBackgroundUrl
    this.confirmDialog = false
  }
}

注意：如果你的业务需要用原图作为背景，只需把selectBackground方法中取的asset.thumbnailUrl替换为实际存储原图路径的字段即可，原有弹窗逻辑无需改动。

内容的提问来源于stack exchange，提问作者Pianoc