"You may have an infinite update loop in a component render function" warning in Vue component

Question

I'm creating a basic table with a sorting feature:

<template>
  <!-- more code -->
  <tr v-for="item in sortBy(data.body, { name: 'name', order: 1 })">
    <td v-for="field in item">{{ field }}</td>
  </tr>
  <!-- data.body => [{ name: Group 1 }, { name: Group2 }, // etc.] -->
</template>

props: {
  data: {
    type: Object,
    default () {
      return {}
    }
  }
},

methods: {
  sortBy (data, params) { 
    // the warning disappears if I only leave "return data"
    data.sort((a, b) => {
      return a[params.name] - b[params.name] * params.order
    })
    return data
  }
}

For some reason, I'm getting this warning:

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

Why is this is and how to fix it?

Answer 1

You're getting the warning because you're changing the value of data.body within sortBy. This data change will cause the render function to run again. The reason you're not getting an infinite loop is that on the second call to sortBy the data is already sorted which results in no data change to data.body.

The solution is what Jaromanda X mentioned. Using slice will make a copy of the array which means data.body will not change in value, and therefore no re-render will be called.

return data.slice().sort(....