javascript - Vue Js 不更新列表而是更新对象

Question

我正在学习 Vuejs 但我被卡住了。为什么我可以看到消息已添加到对象(在 Chrome Vue 调试器中)，但它没有添加到包含列表的 div 中？

我的 Vue 组件:

<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>

我的 Vue 实例:

$(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();

            }
        }
    });

});

我的 HTML 模板调用:

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

没有编译或运行时错误，我可以在 vue chrome 工具中看到添加到 props 的记录。我还可以看到添加到 div 的空 HTML 元素。

我错过了什么？

更新:我的记录结构:

response.data 是一个对象数组，每个对象如下:

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

e.message.message 包含文本消息条目，因此只是一个字符串。

我试图在 fetchMessages 方法期间访问每个对象中的 message 变量。

Answer 1

您正在添加具有 sysmessage 作为属性的对象。

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

但是你正在尝试查看

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

根据您的更新，代码应该是:

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

您可以将模板保留为

v-html="sysmessage.message"