时间戳

首页 > 解决方案 > 在 v-for 循环中调用方法

loops - 在 v-for 循环中调用方法

问题描述

我有一个问题，我理解这个问题，但我不知道如何解决它。我在 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 的新手，所以不明白如何解决这个问题。

谢谢

标签： loopsvue.jsinfinite

解决方案

看起来您正在使用 firebase 来检索您的数据，所有这些回调child_added都是 ansyc，您不能用简单的return语句返回它们。

您的选项是在创建的事件函数中运行它，一旦回调返回，您可以更新数据变量然后显示它。

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>

推荐阅读