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包含文本消息条目，因此只是一个字符串。

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

Answer 1

您要添加x作为属性的对象。

sysmessage

但你正试图查看

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

根据您的更新，代码应为：

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

您可以将模板保留为

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

Vuejs不更新列表但更新obect

1 个答案: