RAZA !!! Lean el código 1 y mil veces de ser necesario. PERO ENTIÉNDANLO, no escriban solo por replicar, experimenten, hagan los ejercicios, lean el código, modifíquenlo, es una chulada darte cuenta de que entiendes todo lo escrito.
0:00/16:51
RAZA !!! Lean el código 1 y mil veces de ser necesario. PERO ENTIÉNDANLO, no escriban solo por replicar, experimenten, hagan los ejercicios, lean el código, modifíquenlo, es una chulada darte cuenta de que entiendes todo lo escrito.
La forma que yo encontre para marcar los mensajes como leidos fue crear un mutation en messages, el cual recibo el channelId, luego hago un map sobre todos los mensajes y veo si el channelId coincide. Si coincide, actualizo el message.read a true
// En el archivo index.js de messages
mutations: {
markAsRead(state, channelId) {
state.messages.map((message) => {
if (message.channelId === channelId) {
message.read = true
}
})
}
}
Luego en HomeView importo la mutation y la agrego en ChatIem
<script>
methods: {
...mapMutations('messages', ['markAsRead'])
}
</script>
<template>
<ChatItem
v-for="channel in getChannels(search)"
:key="channel.id"
:id="channel.id"
:name="channel.name"
:messages="channel.messages"
@click="markAsRead(channel.id)"
/>
</template>
Solución al reto de enviar mensajes en el chat:
Primero cree una mutations en el módulo message, este recibe un parámetro que es un objeto con el mensaje y el channel id:
mutations: {
addMessage(state, newMessage) {
state.messages.push({
id: Date.now(),
author: 1,
message: newMessage.message,
timestamp: new Date().toLocaleTimeString(),
read: true,
channelId: parseInt(newMessage.channelId),
});
},
Luego cree una variable reactiva, que la llame newMessage y la vincule con v-model al textarea de la vista:
const newMessage = ref("");
const sendMessage = () => {
store.commit("messages/addMessage", {
message: newMessage.value,
channelId: channelId.value,
});
newMessage.value = "";
// scrollToBottom();
};
<footer>
<textarea
rows="3"
v-model="newMessage"
@keyup.enter="sendMessage"
></textarea>
<button @click="sendMessage">
<Icon icon="carbon:send-alt" />
</button>
</footer>
Se puede dar click al botón de enviar, o bien presionar la tecla Enter para que se envie el mensaje. Cabe aclarar que lo hice en Composition API
Jose Alejandro Pantoja Giraldo
RAZA !!! Lean el código 1 y mil veces de ser necesario. PERO ENTIÉNDANLO, no escriban solo por replicar, experimenten, hagan los ejercicios, lean el código, modifíquenlo, es una chulada darte cuenta de que entiendes todo lo escrito.
Luis Diego Aguilar Ruiz
Julian David Alzate Cuervo
gracias amigo por la solucion
Ameth Ordoñez Erazo
La forma que yo encontre para marcar los mensajes como leidos fue crear un mutation en messages, el cual recibo el channelId, luego hago un map sobre todos los mensajes y veo si el channelId coincide. Si coincide, actualizo el message.read a true
// En el archivo index.js de messages mutations: { markAsRead(state, channelId) { state.messages.map((message) => { if (message.channelId === channelId) { message.read = true } }) } }
Luego en HomeView importo la mutation y la agrego en ChatIem
<script> methods: { ...mapMutations('messages', ['markAsRead']) } </script> <template> <ChatItem v-for="channel in getChannels(search)" :key="channel.id" :id="channel.id" :name="channel.name" :messages="channel.messages" @click="markAsRead(channel.id)" /> </template>
Solución al reto de enviar mensajes en el chat:
Primero cree una mutations en el módulo message, este recibe un parámetro que es un objeto con el mensaje y el channel id:
mutations: { addMessage(state, newMessage) { state.messages.push({ id: Date.now(), author: 1, message: newMessage.message, timestamp: new Date().toLocaleTimeString(), read: true, channelId: parseInt(newMessage.channelId), }); },
Luego cree una variable reactiva, que la llame newMessage y la vincule con v-model al textarea de la vista:
const newMessage = ref(""); const sendMessage = () => { store.commit("messages/addMessage", { message: newMessage.value, channelId: channelId.value, }); newMessage.value = ""; // scrollToBottom(); };
<footer> <textarea rows="3" v-model="newMessage" @keyup.enter="sendMessage" ></textarea> <button @click="sendMessage"> <Icon icon="carbon:send-alt" /> </button> </footer>
Se puede dar click al botón de enviar, o bien presionar la tecla Enter para que se envie el mensaje. Cabe aclarar que lo hice en Composition API