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

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