CODEWITHSUNDEEP
loopsvue.jsinfinite
MomasVII
MomasVII

Reputation: 5091

Calling a method within a v-for loop

I have an issue and I understand the problem but I have no idea how to fix it. I am getting the infinite loop error in my v-for loop because I change the value inside which calls the loop again which changes the value and so on.

How can I rewrite this code so it will do what I need but not produce an error.

<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
}

This actually works and shows the correct count for each column but it freezes up other parts of my program obviously because of the error. I have tried computed but believe I need a method.

I'm new to Vue so don't understand how to get around this issue.

Thanks

Upvotes: 0

Views: 434

Answers (1)

aquilesb
aquilesb

Reputation: 2272

Looks like you are using firebase to retrieve your data, all those callbacks in child_added are ansyc, you can't return them with a simple return statement.

On option for you is running this inside the created event function, and once the callback returns you may update a data variable and then show it up.

OBS: Check if there is any other option in firebase to return the number of contracts from a client in only one response. I don't know how it works but it looks like there is a chance of two parallel callback functions updating contractsNr at the same time

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>

Upvotes: 2

Related Questions