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

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

It’s a strange question. I’ve never met it before. If it’s a project led by myself, it’s easy to do. Just debug it slowly. It happens that I encounter this problem in the company’s project, and the system structure of the company’s project is very complex, and I haven’t fully mastered it. What’s more, it’s very difficult to debug because of the complexity of the system. In addition, there is no testing framework. It’s hard to do

It was 3 o’clock or 4 o’clock in the afternoon when I was hungry. As a result, I fell into a state of hypoglycemia again. It’s a real house leak. It’s rainy and rainy, and the boat is small. I’m so hungry that my brain aches

But I finally got Google + debug. In fact, in the V-for loop, if you use methods or calculated attributes to operate VM. $data’s attributes, in theory, it may cause an infinite loop because you modify the loop object. At this point, Vue will issue a warning (not really infinite loop).

For example, such a component contains a set of buttons implemented with : checked + < label> . It has the following functions:

To be able to group, you need to set their name attributes

In order to control <input> with <label> , you need to set ID for <input>

The button can be deleted

So I chose to do this:

<template>
<div>
  <template v-for="(item, index) in items">
    <input type="checkbox" :name="'my-component-' + selfIndex" :id="getID">
    <label :for="getID(false)">
    <button type="button" @click="remove(index)"&>&times;</button>
  </template>
</div>
</template>

<script>
let count = 0;

export default {
  data() {
    return {
      selfIndex: 0,
      itemIndex: 0,
    }
  },
  methods: {
    getID(increase = true) { // Note that this is where the problem lies
      if (increase) {
        this.itemIndex++;
      }
      return `my-component-${this.selfIndex}-${this.itemIndex}`;
    },
  },
  beforeMount() {
    this.selfIndex = count;
    count++;
  }
}
</script>

Here, in order to generate a unique ID, I choose to use the vm.itemIndex ++, the problems mentioned above will appear, and there are hidden dangers.

There are two solutions: one is to put itemindex in local variables, so that it is not directly associated with components; the other is to write a global unique ID generating function, and then reference it. The principle is the same. The repetitive part will not be written. After modification, it is generally as follows:

Scheme 1

<script&>
let count = 0;
let itemCount = 0; // Put the element counter here

export default {
  methods: {
    getID(increase = true) {
      if (increase) {
        itemCount++;
      }
      return `my-component-${this.selfIndex}-${itemCount}`;
    }
  }
};
</script&>

Scheme 2

// helper.js get the unique id
let count = 0;
export default function uniqueID(increase = true) {
  if (increase) {
    count++;
  }
  return `prefix-${count}`;
}

// Original components
import uniqueID from './helper';

export default {
  methods: {
    getID(increase = true) {
      let id = uniqueID(increase);
      return `my-component-${this.selfIndex}-${id}`;
    }
  }
}

Similar Posts: