Обновление данных при изменении значения Vue Js

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() получит уникальный идентификатор клиента, сравнит его с базой данных sites и посчитает, сколько существует. Код ниже просто зацикливается вокруг каждого client, а затем проверяет, сколько sites имеет client_id из aClient['.key']. Не очень важно, это работает, получает счетчик и добавляет его в массив клиентов.

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

            })
        })
    },

Теперь в моем html есть 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)
}

Я подозреваю, что функция getSiteCount() запускается после извлечения клиентов (задержка 0,5 с) из БД. Первоначальное значение siteCount равно 0, а filterClients запускается до того, как эти значения будут установлены. Мне нужно отложить filterClients() до запуска функции getSiteCount() или чтобы она автоматически обновлялась при запуске функции getSiteCount().

Может ли кто-нибудь помочь мне убедиться, что при начальной загрузке страницы отображаются клиенты в порядке их количества (siteCount)

Answer 1

Это был на самом деле предостережение.

Vue не может обнаружить следующие изменения в массиве: Когда вы непосредственно устанавливаете элемент с индексом, например, vm.items [indexOfItem] = newValue

я изменился this.clients[clientIndex].siteCount= 0 в Vue.set(this.clients[clientIndex], 'contractsNr', 0)

Обновляется, когда данные поступают идеально сейчас.

Спасибо, Джейкоб