es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Actualizar imagen seleccionada a través de un diálogo de confirmación.

11 Jul, 2023 Programación

Tengo una cuadrícula de imágenes de la cual quiero hacer una selección y actualizar el valor con la imagen seleccionada. Antes de hacerlo, espero una indicación que verifique si deseas actualizar o cancelar/descartar.

¿Qué debo hacer para actualizar “this.backGroundUrl” en el método de abajo con la nueva imagen seleccionada?

Cuadrícula de imágenes:

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

Componente de confirmación:

<confirmdialog v-if="confirmDialog" v-model="confirmDialog" @cancel="confirmDialog = false" @confirm="updatedBackgroundImage()"></confirmdialog>

Activos:

  computed: {
    ...mapState('assets', ['assets']),
  }

Método:

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
  }
}
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para actualizar “this.backGroundUrl” con la imagen seleccionada, deberás pasar la URL de la imagen seleccionada al método “updatedBackgroundImage”.

    Puedes lograr esto creando una nueva propiedad de datos llamada “selectedImage” y actualizándola con la URL de la imagen seleccionada utilizando un controlador de eventos de clic en el grid de imágenes. Luego, cuando el usuario confirme el cambio en el componente ConfirmDialog, puedes establecer “this.backGroundUrl” con el valor de “selectedImage”.

    Aquí tienes un ejemplo de cómo actualizar el código anterior:

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

    <confirmdialog v-if="confirmDialog" v-model="confirmDialog" @cancel="confirmDialog = false" @confirm="updatedBackgroundImage"></confirmdialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      confirmDialog: false,
      selectedImage: "",
    };
  },
  methods: {
    getThumbnail(asset) {
      return this.getMediaUrl(asset.thumbnailUrl);
    },
    getMediaUrl(url) {
      return process.env.VUE_APP_BACKEND_URL + url;
    },
    onImageClick(imageUrl) {
      this.selectedImage = imageUrl;
      this.confirmDialog = true;
    },
    updatedBackgroundImage() {
      this.backGroundUrl = this.selectedImage;
      this.confirmDialog = false;
    },
  },
};
</script>

    En el código actualizado, se agrega un nuevo método llamado “onImageClick”, que establece la propiedad de datos “selectedImage” y abre el ConfirmDialog. El método “updatedBackgroundImage” utiliza la URL de la imagen seleccionada para actualizar “this.backGroundUrl” y luego cierra el ConfirmDialog.

Comments are closed.