5 ms·

Why not just add your property with "vue.set()"? I feel you could have avoided this "awful" pain by just reading a little documentation. I mean, how exactly d

Why not just add your property with "vue.set()"? I feel you could have avoided this "awful" pain by just reading a little documentation. I mean, how exactly did you think your new property would be picked up? I know frameworks are supposed to abstract over things but you do still need some idea what's happening under the hood.

gcr 9y ago
Thanks for the hint. This will help me in my own project. One question: Which objects will Vue attach observers to? Just props and data? I sometimes reference objects in Computed values, but those objects never seem to force re-rendering when they're changed.
roblabla 9y ago
The problem is, Vue.set is documented exactly nowhere in the getting started guide[0]. In my case, I couldn't use it because I wasn't the one modifying the data binder, d3-force was. But either way, this should definitely be in the guide ! Besides, it's possible for the new property to be picked up through Proxy Objects[1]. So it's not like it's entirely impossible for Vue to do this, they just chose not to (and they probably have good reason, like IE support). [0]: https://vuejs.org/v2/guide/index.html https://vuejs.org/v2/guide/index.html [1]: https://caniuse.com/#feat=proxy https://caniuse.com/#feat=proxy
masklinn 9y ago
> I mean, how exactly did you think your new property would be picked up? If mutations of existing properties are picked up, one could naturally expect that addition of new properties would also be.
fishtank 9y ago
Vue.set is the way to go here, which used to be more prominent in the docs. The section that called this out (along with other reactivity "gotchas") has apparently been removed from the latest version. Here's an archive link: http://web.archive.org/web/20170711045330/https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats http://web.archive.org/web/20170711045330/https://vuejs.org/...
- alevans4 9y ago
  They moved it. It's under List Rendering now in the guide. I have no idea why. https://vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats https://vuejs.org/v2/guide/list.html#Object-Change-Detection...
alevans4 9y ago
I spend a good amount a time answering questions in the Vue StackOverflow tags. While this is documented, it's nevertheless something a huge amount of people stumble over. I'd say the change detection caveats are right behind "this" issues (which isn't really a Vue issue, just javascript) in terms of the most common problems I see in Vue code.

gcr 9y ago

Thanks for the hint. This will help me in my own project. One question: Which objects will Vue attach observers to? Just props and data? I sometimes reference objects in Computed values, but those objects never seem to force re-rendering when they're changed.

roblabla 9y ago

The problem is, Vue.set is documented exactly nowhere in the getting started guide[0]. In my case, I couldn't use it because I wasn't the one modifying the data binder, d3-force was. But either way, this should definitely be in the guide ! Besides, it's possible for the new property to be picked up through Proxy Objects[1]. So it's not like it's entirely impossible for Vue to do this, they just chose not to (and they probably have good reason, like IE support). [0]: https://vuejs.org/v2/guide/index.html https://vuejs.org/v2/guide/index.html [1]: https://caniuse.com/#feat=proxy https://caniuse.com/#feat=proxy

masklinn 9y ago

> I mean, how exactly did you think your new property would be picked up? If mutations of existing properties are picked up, one could naturally expect that addition of new properties would also be.

fishtank 9y ago

Vue.set is the way to go here, which used to be more prominent in the docs. The section that called this out (along with other reactivity "gotchas") has apparently been removed from the latest version. Here's an archive link: http://web.archive.org/web/20170711045330/https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats http://web.archive.org/web/20170711045330/https://vuejs.org/...

alevans4 9y ago
They moved it. It's under List Rendering now in the guide. I have no idea why. https://vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats https://vuejs.org/v2/guide/list.html#Object-Change-Detection...

alevans4 9y ago

I spend a good amount a time answering questions in the Vue StackOverflow tags. While this is documented, it's nevertheless something a huge amount of people stumble over. I'd say the change detection caveats are right behind "this" issues (which isn't really a Vue issue, just javascript) in terms of the most common problems I see in Vue code.