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 — Kick Buttowski
– Kick Buttowski, Commented Apr 1, 2021 at 2:36

tony19 · Accepted Answer · 2022-07-15 02:14:46Z

1

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>

edited Jul 15, 2022 at 2:14

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 1, 2021 at 2:28

Phil

166k25 gold badges265 silver badges269 bronze badges

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

Comments

Gaş Bîn · Accepted Answer · 2023-04-04 17:58:45Z

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 4, 2023 at 17:58

Gaş Bîn

951 silver badge7 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related