- 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
});
}
...
}
},