Dev0ps
1 week ago
59
1
Vue

After First Message broadcast show error this.messages.push is not a function

Posted 1 week ago by Dev0ps

Error

[Vue warn]: Error in v-on handler: "TypeError: this.messages.push is not a function"

found in

---> <Chats> at resources/assets/js/components/ChatsComponent.vue
       <Root>```

My Code Vue file

   <div class="col-12">
       <div class="card card-default">
           <div class="card-header">Messages</div>
           <div class="card-body p-0">
               <ul class="list-unstyled" style="height:300px; overflow-y:scroll" v-chat-scroll>
                   <li class="p-2" v-for="(message, index) in messages" :key="index" >
                       <strong><!--{{ message.user.name }}-->Lucky</strong>
                       {{ message.message }}
                   </li>
               </ul>
           </div>

           <input
                @keydown="sendTypingEvent"
                @keyup.enter="sendMessage"
                v-model="newMessage"
                type="text"
                name="message"
                placeholder="Enter your message..."
                class="form-control">
       </div>
        <span class="text-muted" v-if="activeUser" >{{ activeUser.name }} is typing...</span>
   </div>

    <!--<div class="col-4">-->
        <!--<div class="card card-default">-->
            <!--<div class="card-header">Active Users</div>-->
            <!--<div class="card-body">-->
                <!--<ul>-->
                    <!--<li class="py-2" v-for="(user, index) in users" :key="index">-->
                        <!--{{ user.name }}-->
                    <!--</li>-->
                <!--</ul>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
export default {
    props:['user'],

    data() {
        return {
            messages: [],
            newMessage: '',
            users:[],
            activeUser: false,
            typingTimer: false,
        }
    },

    created() {
        this.fetchMessages();
        Echo.join('chat')
            .here(user => {
                this.users = user;
            })
            .joining(user => {
                this.users.push(user);
            })
            .leaving(user => {
                this.users = this.users.filter(u => u.id != user.id);
            })
            .listen('MessageSent',(event) => {
                this.messages.push(event.message);
            })
            .listenForWhisper('typing', user => {
               this.activeUser = user;

                if(this.typingTimer) {
                    clearTimeout(this.typingTimer);
                }

               this.typingTimer = setTimeout(() => {
                   this.activeUser = false;
               }, 3000);
            })

    },

    methods: {
        fetchMessages() {
            axios({
                method:'post',
                url:'LoadOldMsg',
                baseURL: '/',
            })
                .then(response => {
                    // this.messages = response.data;
                    console.log(response.data);
                })
                .catch(error => {
                    console.log(error);
                });
        },

        sendMessage() {

            this.messages.push({
                // user: this.user,
                user: "Hacker",
                message: this.newMessage
            });

            axios({
                method:'post',
                url:'SentMessage',
                data: {message: this.newMessage},
                baseURL: '/',
            })
                .then(response => {
                    this.messages = response.data;
                })
                .catch(error => {
                    console.log(error);
                });

            // axios.post('/SentMessage', {message: this.newMessage});

            this.newMessage = '';
        },

        sendTypingEvent() {
            Echo.join('chat')
                .whisper('typing', this.user);
        }
    }
}

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