CODEWITHSUNDEEP
vue.js
Thiago Augusto Barbosa
Thiago Augusto Barbosa

Reputation: 31

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

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!!

Upvotes: 1

Views: 2527

Answers (2)

Gaş B&#238;n
Gaş B&#238;n

Reputation: 97

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)

enter image description here

Upvotes: 0

Phil
Phil

Reputation: 164724

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>

Upvotes: 1

Related Questions