Question

我有一个问题，并且我理解该问题，但是我不知道如何解决。我在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的新手，所以不了解如何解决此问题。

谢谢

Answer 1

就像您正在使用firebase来检索数据一样，child_added中的所有回调都是ansyc，您无法使用简单的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>

在v-for循环中调用方法

1 个答案: