Вызов метода в цикле v-for - PullRequest
Новая
       58

Вызов метода в цикле v-for

0 голосов
/ 11 апреля 2019

У меня есть проблема, и я понимаю проблему, но я не знаю, как ее исправить. Я получаю ошибку бесконечного цикла в моем цикле v-for, потому что я изменяю значение внутри, которое снова вызывает цикл, который изменяет значение и т. Д.

Как мне переписать этот код, чтобы он делал то, что мне нужно, но не выдает ошибку. 

<div v-for="clients in filterClients">
    <div>
        {{ countClientContacts(clients['.key']) }}
    </div>
</div>



countClientContacts: function(cKey) {
    var x = 0
    clientContactsRef.orderByChild('client_id').equalTo(cKey).on('child_added', function(clientDetails) {
        x++
    })
    return x
}

Это на самом деле работает и показывает правильное количество для каждого столбца, но оно останавливает другие части моей программы, очевидно, из-за ошибки. Я пытался вычислить, но считаю, что мне нужен метод.

Я новичок в Vue, поэтому не понимаю, как обойти эту проблему.

Спасибо

1 Ответ

2 голосов
/ 11 апреля 2019

Похоже, вы используете firebase для извлечения ваших данных, все эти обратные вызовы в child_added являются ансиками, вы не можете вернуть их с помощью простого оператора return.

Опция on для вас запускает это внутри созданной функции события, и как только обратный вызов возвращается, вы можете обновить переменную данных и затем показать ее.

OBS: проверьте, есть ли какая-либо другая опция в firebase, чтобы вернуть количество контрактов от клиента только в одном ответе. Я не знаю, как это работает, но похоже, что есть вероятность одновременного обновления двух функций обратного вызова contractsNr 

data: {
  clients: [
    { '.key': 1, contractsNr: 0},
    { '.key': 2, contractsNr: 0}
  ]
}

created: function () {
  this.clients.foreach((client, clientIndex) => {
    clientContactsRef.orderByChild('client_id').equalTo(client['.key']).on('child_added', (clientDetails) => {
      this.clients[clientIndex].contractsNr = this.clients[clientIndex].contractsNr + 1
    })
  })
}
<div v-for="client in filterClients">
    <div>
        {{ client.contractsNr }}
    </div>
</div>
...