Question

我的处境很复杂，我对Vue并不感到惊讶，所以我需要一些帮助。我有一个Firebase数据库，该数据库获取一个数组（客户端）并显示它。

const clientsRef = db.ref('clients')
firebase: {
    clients: {
        source: clientsRef,
        //data has been retrieved from firebase
        readyCallback: function() {
            this.getSiteCount() // Get number of sites associated with client
            this.loaded = true // Hide loader bar once this becomes true
        }
    }
},

完成加载后，getSiteCount()将获得客户端的唯一ID，并将其与sites DB进行比较，并计算存在的ID。下面的代码只是在每个client周围循环，然后检查有sites的{{1}}中有多少client_id。并不是很重要，它起作用并获得计数并将其添加到客户端数组。

aClient['.key']

现在在我的html中，我有getSiteCount: function() { this.clients.forEach((server, clientIndex) => { this.clients[clientIndex].siteCount= 0 serverContactsRef.orderByChild('client_id').equalTo(server['.key']).on('child_added', (clientDetails) => { this.clients[clientIndex].siteCount= this.clients[clientIndex].siteCount+ 1 }) }) },和计算函数...

v-for="clients in filterClients"

我怀疑是因为filterClients: function() { function compare(a, b) { if (a.siteCount < b.siteCount) { return 1 } if (a.siteCount > b.siteCount) { return -1 } return 0 } return this.clients.sort(compare) }函数一旦从数据库中拉出客户端（延迟0.5秒）后便会运行，因此其初始getSiteCount()值为0，而siteCount则在设置这些值之前运行。我需要延迟filterClients直到filterClients()函数运行，或者需要它在getSiteCount()函数运行时自动更新。

有人可以帮我确保页面的初始加载按其拥有的站点数（getSiteCount()）来显示客户端

Answer 1

这实际上是一个警告。

Vue无法检测到对数组的以下更改：当您直接使用索引设置项目时，例如vm.items [indexOfItem] = NEWVALUE

我改变了 this.clients[clientIndex].siteCount= 0 至 Vue.set(this.clients[clientIndex], 'contractsNr', 0)

立即更新数据。

感谢雅各布

值更改时更新数据Vue Js

1 个答案: