making nested properties reactive?

[mark-hahn]

I have an object in a model. I need for nested property changes in that object to trigger reactions. If I use a $set on a nested property I get this...

[Vue warn]: You are setting a non-existent path "curShow.tags.MarkOnly" on a vm instance. 
Consider pre-initializing the property with the "data" option for more reliable reactivity and better performance.

To fix this I am putting each nesting level directly in the data section like this ...

  data:
    allShows: {}
    curShow: {}
    curTags:  {}

  watched:
    curShowIdx: (idx) -> 
        @curShow = show = @allShows[idx]
        @curTags  = show.tags

So instead of just passing curShow to a component I now have to pass curShow and curTags, even though tags is a property of shows. In this example this is a small problem but in my real code I have a number of situations like this with deep data and the length of the data section and props array is getting really long.

I'm going through my code and fixing these warnings and my small neat code is getting bloated. Is there a better way of doing this?

Edit: I had a post following this that said the problem was only happening when adding a new property. That was wrong. Setting a new value on an existing property that is nested gives the warning above. I deleted it. Sorry.

[yyx990803]

Not that much for a nested property, you can safely ignore it if you know you need to do it. On Fri, Jun 19, 2015 at 7:35 PM mark-hahn [email protected] wrote:

I've learned more about this warning. It happens then I'm adding a new property, not when I'm setting an existing property's value. I can't avoid doing this because a user can create a new tag on the nested object.

So my solution above doesn't work. I guess I'll have to live with the warning. How bad is the performance when this happens?

— Reply to this email directly or view it on GitHub https://github.com/vuejs/Discussion/issues/208#issuecomment-113672615.

[Burstaholic]

Vue.set will do this as expected.