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.
Curso Firebase para Web
Visualizar y editar la imagen de portada
- Para mostrar la imagen de portada tendremos que ajustar el componente
RoomsComponent.vuede 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
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
Participa en la Comunidad Escuela Vue
