Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
crswll opened this issue Aug 12, 2015 · 4 comments
Closed

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

crswll opened this issue Aug 12, 2015 · 4 comments

Comments

@crswll
Copy link

crswll commented Aug 12, 2015

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

@yyx990803
Copy link
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
Copy link
Author

crswll commented Aug 12, 2015

Perfect. Thanks, Evan!

@yanlee26
Copy link

yanlee26 commented Feb 19, 2017

perfect,Even!!!

@mdocter
Copy link

mdocter commented May 11, 2017

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
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants