[Vuejs]-Vue list doesn't "properly" re-render after being sorted

by

4👍

✅

The products property which you are iterating in your html code to render the list of products is not an observable. Vue only tracks observable properties and re renders every time any one of the observables changes. Even though you are changing the order of products, Vue is not aware of the change as it is not an observable. To make products property an observable add it in data property just the way you have added nutrients and initialise it as an empty array.

Make your data field something like this:

data: {
  nutrients: nutrients,
  products: []
}

See this for better understanding of Vue’s reactivity system works.

👤Sundeep babbur

Leave a comment