Bastos
170
10
Vue

Time message disaply but only when I refresh

Posted 1 month ago by Bastos

Hello, So I just add the answer on how to display time next to my message but the problem now is that when I type a new message, the time does not appear, I have to refresh the page to see it, if anyone have any clue on how to solve it I'll be really thankful ! This is my ChatMessages.vue :

<template>
    <form @submit.prevent="sendMessage">
        <div class="input-group" >

            <input id="btn-input" type="text" name="message"  class="form-control input-sm"  placeholder="Ecrire..." v-model="newMessage" required>
            

            <span class="input-group-btn">
            <button class="btn btn-primary btn-sm" type="submit" id="btn-chat">
                &#10003
            </button>
        </span>
        </div>
    </form>
</template>

<script>


    export default {
        props: ['user'],

        data() {
            return {
                newMessage: '',
            }
        },

        methods: {
            sendMessage() {
                this.$emit('messagesent', {
                    user: this.user,
                    message: this.newMessage
                });

                setTimeout(function() {
                    const messages = document.getElementById('mess_cont');

                    messages.scrollTop = messages.scrollHeight;
                    }, 100);
                this.newMessage = '';

            }

        }
    }


</script>

This is my messages.php :

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Message extends Model
{
    /**
     * Fields that are mass assignable
     *
     * @var array
     */
    protected $fillable = ['message'];
    protected $appends = ['human_readable_time'];


    /**
     * A message belong to a user
     *
     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
     */
    public function user()
    {
        return $this->belongsTo(User::class);
    }
    public function getHumanReadableTimeAttribute()
    {
        return $this->created_at->format('H:i');
    }
}

And this is my chatForm.vue (And I think the problem is here) :

<template>
    <form @submit.prevent="sendMessage">
        <div class="input-group" >

            <input id="btn-input" type="text" name="message"  class="form-control input-sm"  placeholder="Ecrire..." v-model="newMessage" required>
            

            <span class="input-group-btn">
            <button class="btn btn-primary btn-sm" type="submit" id="btn-chat">
                &#10003
            </button>
        </span>
        </div>
    </form>
</template>

<script>


    export default {
        props: ['user'],

        data() {
            return {
                newMessage: '',
            }
        },

        methods: {
            sendMessage() {
                this.$emit('messagesent', {
                    user: this.user,
                    message: this.newMessage
                });

                setTimeout(function() {
                    const messages = document.getElementById('mess_cont');

                    messages.scrollTop = messages.scrollHeight;
                    }, 100);
                this.newMessage = '';

            }

        }
    }


</script>

Thanks for your help !

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.