Vuejs not updating list but updating obect

Question

I am learning Vuejs and I am stuck. Why can I see the messages get added to the object (in Chrome Vue debugger) yet it is not added to the div that contains the list?

My Vue Component:

<template>
    <div id="round-status-message" class="round-status-message">
        <div class="row">
            <div class="col-xs-12" v-for="sysmessage in sysmessages" v-html="sysmessage.message"></div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['sysmessages'],

        methods: {
            scrollToTop () {
                this.$el.scrollTop = 0
            }
        }

    };
</script>

My Vue instance:

$(document).ready(function()
{
    Vue.component('chat-system', require('../components/chat-system.vue'));

    var chatSystem = new Vue({
        el: '#system-chat',

        data: function () {
            return {
                sysmessages: []
            };
        },

        created() {
            this.fetchMessages();

            Echo.private(sys_channel)
                .listen('SystemMessageSent', (e) => {

                    this.sysmessages.unshift({
                        sysmessage: e.message.message,
                    });

                    this.processMessage(e);

                });

        },

        methods: {
            fetchMessages() {
                axios.get(sys_get_route)
                .then(response => {
                    this.sysmessages = response.data;
                });
            },

            processMessage(message) {

                this.$nextTick(() => {
                    this.$refs.sysmessages.scrollToTop();
                });

                // updateGame();

            }
        }
    });

});

My template call in HTML:

<div id="system-chat">
    <chat-system ref="sysmessages" v-on:systemmessagesent="processMessage" :sysmessages="sysmessages" :player="{{ Auth::user() }}"></chat-system>
</div>

There are no compile or run time errors and I can see records added to the props in the vue chrome tool. I can also see empty HTML elements added to the div.

What have I missed?

UPDATE: My record structures:

response.data is an array of objects, each like this:

{"data":[
     {"id":100,
      "progress_id":5,
      "message":"start message",
      "action":"welcome"
     },
     {"id"....

e.message.message contains the text message entry, so just a string.

I am trying to access the message variable in each object during the fetchMessages method.

Hi @Bert, your suggestion fixed my problem but it broke the fetchMessages piece now. — TheRealPapa
How did it break it? Ideally, what is the structure of response.data and e.message. — Bert

Bert Bert · Accepted Answer · 2017-08-30T15:41:50

You're adding objects with sysmessage as the property.

this.sysmessages.unshift({
  sysmessage: e.message.message,
});

But you are trying to view

v-for="sysmessage in sysmessages" v-html="sysmessage.message"

Based on your update, the code should be:

this.sysmessages.unshift({
  message: e.message.message,
});

And you can leave the template as

v-html="sysmessage.message"

Vuejs not updating list but updating obect

1 Answers