Question

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

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

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

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);
}

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

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

Here's the Vue documentation on Change Detection Caveats.

VueJS列表渲染异常

1 个答案: