Skip to content

How much should I worry about [Vue Warn]ings? #1153

Closed
@crswll

Description

@crswll

I have a pretty simple sort going on but I'm getting this error:

[Vue warn]: You may have an infinite update loop for watcher with expression: items

Any advice? Am I doing anything funky? Here's the code that's throwing it.

var sorts = {
  foo: [8, 6, 5, 2, 1, 3, 4, 7, 10, 9],
  bar: [8, 6, 5, 2, 10, 9, 1, 3, 4, 7],
  baz: [10, 8, 6, 5, 2, 9, 1, 3, 4, 7]
};

new Vue({
  el: '#app',
  data: {
    category: 'foo',
    items: [
      { id: 1, name: 'One' },
      { id: 2, name: 'Two' },
      { id: 3, name: 'Three' },
      { id: 4, name: 'Four' },
      { id: 5, name: 'Five' },
      { id: 6, name: 'Six' },
      { id: 7, name: 'Seven' },
      { id: 8, name: 'Eight' },
      { id: 9, name: 'Nine' },
      { id: 10, name: 'Ten' }
    ]
  },
  filters: {
    sortByCategory: function (values, category) {
      var sortOrder = sorts[category];
      return values.sort(function (a, b) {
        a = sortOrder.indexOf(a.id);
        b = sortOrder.indexOf(b.id);
        return a - b;
      });
    }
  }
});

along with a demo: http://jsbin.com/ximoqumazi/1/edit?js,output

Activity

yyx990803

yyx990803 commented on Aug 12, 2015

@yyx990803
Member

You are indeed causing an infinite loop, because array.sort() mutates the array itself, which triggers the filter to be applied again. Make sure to sort on a copy:

return values.slice().sort(...)
crswll

crswll commented on Aug 12, 2015

@crswll
Author

Perfect. Thanks, Evan!

yanlee26

yanlee26 commented on Feb 19, 2017

@yanlee26

perfect,Even!!!

mdocter

mdocter commented on May 11, 2017

@mdocter

I just lost a few hours by a similar in place array mutation. In my case I used the Array.prototype.reverse() function in the template.
I mention it here, so maybe this can help other developers.

I used the following code in a template that produced the same infinite loop warning:

<div v-for="tel in telephoneNumbers.reverse()">
  {{tel}}
</div>

Lesson learned: Prepare / mutate data before adding it to the local component state.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @crswll@yyx990803@mdocter@yanlee26

        Issue actions

          How much should I worry about `[Vue Warn]`ings? · Issue #1153 · vuejs/vue