javascript - How can I increment a counter in Vue JS from within a v-for loop without incurring an infinite update loop warning?

admin管理员组

文章数量:1415458

I have the following simple v-for loop:

<div class="HolderRow" v-for="(row, index) in 9" :key="index">
   <Holder v-for="(row, index) in 11" :key="index" :holder1="increment()" />
</div>

On every render of "Holder", I wish to increment a counter by 1 and pass it as a prop to Holder. The increment method along with the incrementing data is as follows:

export default {
  data() {
    return {
      show: false,
      holder: 0
    };
  },
  methods: {
    increment() {
      this.holder = this.holder + 1;
      return this.holder;
    }
  },

  ponents: {
    Holder
  }

But, the problem is I get the following warning from Vue:

vue.runtime.esm.js?2b0e:619 [Vue warn]: You may have an infinite update loop in a ponent render function.

Is there any way to implement this without incurring such a warning/error?

Thanks

I have the following simple v-for loop:

<div class="HolderRow" v-for="(row, index) in 9" :key="index">
   <Holder v-for="(row, index) in 11" :key="index" :holder1="increment()" />
</div>

On every render of "Holder", I wish to increment a counter by 1 and pass it as a prop to Holder. The increment method along with the incrementing data is as follows:

export default {
  data() {
    return {
      show: false,
      holder: 0
    };
  },
  methods: {
    increment() {
      this.holder = this.holder + 1;
      return this.holder;
    }
  },

  ponents: {
    Holder
  }

But, the problem is I get the following warning from Vue:

vue.runtime.esm.js?2b0e:619 [Vue warn]: You may have an infinite update loop in a ponent render function.

Is there any way to implement this without incurring such a warning/error?

Thanks

• javascript
• vue.js

Share Improve this question Follow asked Apr 3, 2020 at 16:39 MathiasMathias 60511 gold badge99 silver badges1919 bronze badges 1

• see :holder1="index1+index2" instead of a function, also you use row and index in nested loops....bad practice – depperm Commented Apr 3, 2020 at 16:42

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

This works (not sure if there is any other way):

<div class="HolderRow" v-for="(row, rowindex) in 9" :key="rowindex">
    <Holder
        v-for="(holder, holderindex) in 11"
        :key="holderindex"
        :holder="holder + (11 * rowindex)"
    />
</div>

Remove brackets of increment.

Should be :holder1="increment"

If you use brackets, increment function will be called before event is triggered.

First issue is you are using the same variable names in your loops, I would suggest using an alternate naming scheme. Then instead of mutating holder in a function it looks like you just want an index so you could do index1*9+index2

<div class="HolderRow" v-for="(row1, index1) in 9" :key="index1">
   <Holder v-for="(row2, index2) in 11" :key="index2" :holder1="index1*9+index2" />
</div>

本文标签：