VueJS 列表渲染异常

Question

我已经阅读了一些关于我的问题的类似主题，但我仍然无法弄清楚，可能是什么问题。 长话短说，我有一个对象数组，这些对象也有一个数组，称为“messages”。父对象有一些额外的数据，而我的问题是由子数组messages引起的。

问题是： messages 数组被服务器填满。之后，我成功渲染了它的内容列表，显示在网页上，到目前为止一切顺利。但是，一旦有新数据从服务器到达，呈现的列表就不会自行更新。我通过 Vue 开发插件检查了数组的内容，新消息在那里，但渲染的列表仍然保持原始状态。

故事的转折是，我创建了一个简单的测试数组，它与原始数组非常相似，并且也在页面上呈现。当有新消息到达时，我会将其推送给他们两个，令我惊讶的是，每个人都在完美地更新自己。出于好奇，我把测试数组渲染注释掉了，不管你信不信，原来的数组在页面上不再自我更新了。在我删除注释的测试数组渲染后，它们都可以再次工作。

vue 组件：

/**
 * Root
 */

import Vue from 'vue'
import axios from 'axios'

import inputComponent from './chat/input.vue'

new Vue({
    el: '#chat-root',
    components: { inputComponent },
    data() {
        return {
            userID: document.getElementById('user').value,
            ready: false,
            roomID: "",
            roomInstances: [],
            test: [
                {
                    messages: []
                }
            ],
            pollTime: 5000
        }
    },
    created() {
        axios.get('chat/init')
            .then(resp => {
                this.roomID = resp.data.roomList[0]._id
                this.roomInstances = resp.data.roomList
                this.fetchMessagesFromServer()
                this.poll()
                this.heartBeat()
            }).catch(err => console.log(err))
    },
    computed: {
        getMessages() {
            return this.roomInstance.messages
        },
        roomInstance() {
            return this.roomInstances.filter(i => i.id = this.roomID)[0]
        }
    },
    methods: {
        setRoom(id) {
            if (this.roomID === id)
                return
            this.roomID = id
        },
        fetchMessagesFromServer() {
            axios.get(`chat/get/${this.roomID}`)
                .then(resp => {
                    this.roomInstance.messages = resp.data.messages
                    this.ready = true
                }).catch(err => console.log(err))
        },
        heartBeat() {
            setInterval(() => axios.get(`heartbeat/${this.userID}`), this.pollTime - 1000)
        },
        poll() {
            axios.create({ timeout: this.pollTime })
                .get(`poll/${this.userID}`).then(resp => {
                    if (resp.data.data) {
                        this.roomInstance.messages.push(resp.data.data.message)
                        this.test[0].messages.push(resp.data.data.message)
                    }
                    this.poll()
                }).catch(err => console.log(err))
        }
    }
})

模板：

extends base

block scripts
    script(src="/dist/chat.bundle.js")

block content

    #chat-root(style="margin-top: 50px" v-cloak)

        // Hack! Supposed to be an axios request?
        input(v-if="false" id="user" value=`${user._id}`)

        input-component(:room="roomID")

        p {{ roomID || "Whoo hooo hoooo!" }}

        span(v-for="room in roomInstances" @click="setRoom(room._id)") {{ room.name }} | 

        div(v-if="ready")
            div(v-for="message in getMessages")
                p {{ message }}
            hr
            div(v-for="fe in test[0].messages")
                p {{ fe }}

Answer 1

一方面，您没有在该计算属性的函数中正确找到roomInstance。您应该只使用find 方法并在回调中返回i.id === this.roomID 而不是i.id = this.roomID：

roomInstance() {
  return this.roomInstances.find(i => i.id === this.roomID);
}

另一个问题可能是当您在 axios.get().then 回调中设置 roomInstance.messages 时。如果此时roomInstance.messages 是undefined，您需要使用Vue.set method（在Vue 实例上通过this.$set 别名）以使该属性具有反应性：

this.$set(this.roomInstance, 'messages', resp.data.messages)

Here's the Vue documentation on Change Detection Caveats.