I'm so new to Vue it hurts. I struggled through Hell and high water to get a small chat app going, as some of you will see from looking at my profile. I finally got it going only to realize that the newest messages are at the bottom and without timestamps, unlike the ones above it. Is there a way to add a timestamp and reverse the .push so the newest message is at the top?
app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Pusher.logToConsole = true;
Vue.component('example', require('./components/Example.vue'));
Vue.component('chat-messages', require('./components/ChatMessages.vue'));
Vue.component('chat-form', require('./components/ChatForm.vue'));
const app = new Vue({
el: '#app',
data: {
chat_messages: []
},
created() {
this.fetchChatMessages();
Echo.private('chat')
.listen('ChatMessageSent', (e) => {
this.chat_messages.push({
body: e.message.body,
user: e.user
});
});
},
methods: {
fetchChatMessages() {
axios.get('/chitterings/chat/messages').then(response => {
this.chat_messages = response.data;
});
},
addChatMessage(message) {
this.chat_messages.push(message);
axios.post('/chitterings/chat/send', message).then(response => {
console.log(response.data);
});
}
}
});
Thanks in advance. I'm off to go read more things about Vue.
Reversing an array in simple: https://www.w3schools.com/jsref/jsref_reverse.asp
However, maybe your API should give back the messages in the correct order?
Displaying dates can be done with a library like momentjs or using native methods.
Native dates: https://www.w3schools.com/js/js_dates.asp MomentJS: https://momentjs.com/
The messages returned are timestamped and in the propper order. But when posting a message without refresh it appears at the bottom instead of the top.
u can use unshift() instead of push()
Unshift seems to have no effect, the newest message still appears at the bottom.
Did you use unshift() in both places that you're using push()?
Shoot, I'd missed the second one, thank you. This still leaves me with the timestamp issue and I'm wondering if I can just run fetchChatMessages again on the posting of a new message? If so, how would I alter my code?
You can use momentjs to do handle that ;)
// Where value is the time of the message
var dateString = moment.unix(value).format("MM/DD/YYYY");
Documentation: http://momentjs.com/docs/ How to use momentjs in Vue: https://stackoverflow.com/questions/34308004/moment-js-with-vuejs
So I got it partially working. The code is currently looking for created_at on chat_messages, which isn't correct, but putting chat_message breaks it. What is this newby doing wrong?
<template>
<ul class="chat">
<li class="left clearfix" v-for="chat_message in chat_messages">
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">
{{ chat_message.user.name }}
</strong>
</div>
<small>{{ createdAtDateHumanReadable }}</small>
<p>{{ chat_message.body }}</p>
</div>
</li>
</ul>
</template>
<script>
export default {
props: ['chat_messages'],
computed: {
createdAtDateHumanReadable: function() {
return moment(this.chat_messages.created_at).format()
}
}
};
</script>
you have two options . you can use method or filter. computed properties don't accept parameters
<template>
<ul class="chat">
<li class="left clearfix" v-for="chat_message in chat_messages">
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">
{{ chat_message.user.name }}
</strong>
</div>
<small>{{ createdAtDateHumanReadable(chat_message.created_at) }}</small>
<p>{{ chat_message.body }}</p>
</div>
</li>
</ul>
</template>
<script>
export default {
props: ['chat_messages'],
methods: {
createdAtDateHumanReadable(time) {
return moment(time).format("MM/DD/YYYY")
}
}
};
</script>
<template>
<ul class="chat">
<li class="left clearfix" v-for="chat_message in chat_messages">
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">
{{ chat_message.user.name }}
</strong>
</div>
<small>{{ chat_message.created_at | createdAtDateHumanReadable }}</small>
<p>{{ chat_message.body }}</p>
</div>
</li>
</ul>
</template>
<script>
export default {
props: ['chat_messages'],
filters: {
createdAtDateHumanReadable(time) {
return moment(time).format("MM/DD/YYYY")
}
}
};
</script>
Thank you so much to everyone. I have one more question if I may. Can I use .splice to add a message and remove the oldest message so the list remains at 25 as pulled from the database?
If you make a request to the backend list changes. Please mark discussion as solved
How do you mean? Remember, I'm coming off jQuery to vue and am a little lost at best.
Please or to participate in this conversation.