Presentación

Firebase Auth

Cloud Firestore

Cloud Storage

Cloud Functions

Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.

  • 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
      });
    }
	 ...
  }
},
Código inicial
Aprende Firebase en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Curso Firebase para Web?

Resuelve todas tus dudas sobre Firebase en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬