在 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 使用简单的 return 语句。

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

OBS：检查 firebase 中是否有任何其他选项 return 仅在一个响应中来自客户的合同数量。我不知道它是如何工作的，但看起来有可能两个并行回调函数同时更新 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 循环中调用方法

Calling a method within a v-for loop

loops

infinite

vue.js