Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

  • Para mostrar la imagen de portada tendremos que ajustar el componente RoomsComponent.vue de forma adecuada.
  • Por ejemplo podemos crear un método que decida qué imagen utilizar (por defecto o seleccionada por el usuario/a).
roomImage(roomId) {
  const room = this.rooms.find(room => room.id === roomId);
  return room.image ? room.image : require("@/assets/img/room-image.jpg");
}
  • En cuanto a la posibilidad de edición de la imagen de portada, se trata de repicar casi en su totalidad las mecánicas que integramos en la última lección, es decir, ajustar la acción y método local updateRoom.
  • En la acción sólo tenemos que añadir la imágen como propiedad del objeto que representa los datos de la sala de conversación.
async updateRoom(context, { roomID, name, description, image }) {
    ...
  roomData.image = image;
    ...
},
  • Y en el método local tendremos que añadir las nuevas funciones.
async updateRoom() {
    ...
  try {
    if (this.image) {
      this.imageURL = await this.$store.dispatch("rooms/uploadRoomImage", {
        file: this.image,
        roomID: this.id
      });
    }
     ...
  }
},
Descarga la chuleta de Vue 3 gratis

Descarga la chuleta de Vue 3

Para tener todas las novedades de Vue 3 al alcance de la mano 🔥️

DESCARGA GRATIS LA CHULETA AHORA 💾

Presentación


Firebase Auth


Cloud Firestore 🔥


Cloud Storage 🗄


Cloud Functions ☁


No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue