Vue.js list rendering diff: “same object” vs “has same values”

This problem doesn’t exist as described. Here is a small example of object reactivity working properly: https://jsfiddle.net/sh0ber/04s1jt8g

I’m guessing, however, that you’re encountering the change detection caveat and need to use Vue.set.

The reason is now clear with the code example: Your computed creates a new property (number) on each Vuex obj that’s not defined in Vuex at the time you set objs. If you had initialized the objs to have a number property as well, you wouldn’t need Vue.set. Another way to prove it is to set o.text instead of o.number and you’ll see it’s reactive without Vue.set

(Btw, it makes more sense to do this computation in a Vuex getter instead of a computed; getters are computeds for Vuex. It’s nice to decouple the logic from the component, and imagine you needed the result in multiple components)

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top