How to call method in loop using vuejs

Question

I already call method in v-for, it works. But I get

[Vue warn]: You may have an infinite update loop in a component render function.

How to solve this?

This is my code:

<tr v-for="(item,index) in all_data" :key="index">
    <td>{{ item.name }}</td>
    <td colspan="2">{{ toMakeLocalString(item.data_trx.total_penjualan) }}</td>
    <td>{{ roundDataPercentPerline(item.data_trx.total_penjualan,all_data_trx.penjualan) }}</td>
                            
     {{ resetVal() }}
     <template v-for="(itemBodyJum,indexBodyJum) in arrHeader">
         <template v-if="itemBodyJum == item.data_provider[incrementI].denom">
         <td :key="indexBodyJum+item.data_provider[incrementI].jumlah_trx">{{ toMakeLocalString(item.data_provider[incrementI].jumlah_trx) }}</td>
         {{ incVal(incrementI) }}
      </template>
      <template v-else>
         <td :key="indexBodyJum+index">0</td>
      </template> 
</tr>

My method:

incVal(val, flagcond) {
   console.log(this.flagInc+'---1')
   if(this.flagInc == false) {
      this.flagInc = true
      console.log(this.flagInc+'---2')
      this.incrementI = val + 1
   }
},
resetVal() {
  this.flagInc = false
  this.incrementI=0
}

You should avoid mutating the same data that is being used in the V-FOR cycle. — IVO GELOV
– IVO GELOV, Commented Jul 16, 2020 at 10:33
Don't call function in template. Instead handle all logic in script before displaying. — AVJT82
– AVJT82, Commented Jul 16, 2020 at 18:10
@AJT82 i want make increment variable but that variable back 0 again if the index loop in <tr> get next number. can you give me example about that? thanks — Hendri Sildrian
– Hendri Sildrian, Commented Jul 17, 2020 at 3:37
Can you provide a working CodeSandbox example to demonstrate your issue ? — IVO GELOV
– IVO GELOV, Commented Jul 17, 2020 at 6:27

IVO GELOV · Accepted Answer · 2020-07-17 09:14:15Z

1

Your problem is that you change the incrementI variable during the V-FOR. Try to use something else instead - e.g. indexBodyJum or indexBodyPen.

answered Jul 17, 2020 at 9:14

IVO GELOV

14.3k1 gold badge21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hendri Sildrian Over a year ago

I dont use indexBodyJum or indexBodyPen because that variable just increment. what i want is the variable increment if suitable conditions. e.g v-if="itemBodyJum == item.data_provider[increamentI].denom"

IVO GELOV Over a year ago

The reason for the warning is that you change the incrementI variable - if you want to get rid of the warning you need to prepare your data arrays outside of the cycle and then inside the cycle only read data without modifying it.

Hendri Sildrian Over a year ago

are there other alternatives for increment variable in loop like another language, e.g php in vue?

IVO GELOV Over a year ago

Vue is different from PHP and other languages - just like SQL is different from Java and other languages. One alternative is to get the data for template from a computed property - and inside the computed property you can increment as many variables as you need.

Collectives™ on Stack Overflow

How to call method in loop using vuejs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related