Vue.js - Infinite update loop in a component render function

Question

I made a small modification in my vue code, to dynamically order my select option:

<option v-for="field in orderByLabels(field.values)" v-bind:value="field.id">
  {{ field.label }}
</option>

methods: {
    orderByLabels: function (dropdown_values) {
      dropdown_values = dropdown_values.sort(function(a, b) {
        return (a.label > b.label) ? 1 : ((b.label > a.label) ? -1 : 0)
      });
      return dropdown_values;
    }
}

This works on my interface, but the console returns me the following error:

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

Well, I have no experience with Vue.js if anyone can help me. Thanks!!

Does this answer your question? ["You may have an infinite update loop in a component render function" warning in Vue component](https://stackoverflow.com/questions/47384480/you-may-have-an-infinite-update-loop-in-a-component-render-function-warning-in) — Kick Buttowski, Apr 01 '21 at 02:36

score 1 · Answer 1 · edited Jul 15 '22 at 02:14

Try not to use methods to render parts of your template. They execute for ever single render cycle. See https://v2.vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

Instead, use a computed property and avoid overwriting your field data property in the v-for loop

computed: {
  fieldsByLabel () {
    // use spread syntax to make a copy so you don't mutate the source array
    return [...this.field.values].sort((a, b) =>
      a.label.localeCompare(b.label))
  }
}

<option v-for="opt in fieldsByLabel" :value="opt.id">
  {{ opt.label }}
</option>

score 0 · Answer 2 · answered Apr 04 '23 at 17:58

0

In my case, my brawser got crashed! so I should immediately stop running and close the tab! Solution: I changed my logic to away that avoid using methode or getter. I just used a normal data and changed it by vue.set methode(for reactivity issue)

answered Apr 04 '23 at 17:58

Gaş Bîn

69
1
6

Vue.js - Infinite update loop in a component render function

2 Answers2