在v-for循环中调用方法

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>