complex nested objects are not reactive

This is my first post here, if I’m not mistaken, so let me say thank you for an amazing framework which inspires us all!

I maintain a package called contextable.js. It uses schema-based objects to describe application’s data model and its primary focus is to simplify server-side and client-side data validation. I’ve been using it in Express.js and GraphQL resolvers for now, but recently I also started using it in Vue.js through vue-contextable plugin.

I’m not sure if this is a bug report or a feature request but I kindly ask for directions on how to handle v-model reactivity in a complex object where arrays of class instances are used. I suspect that Vue.js can’t track changes on arrays of class instance objects though I’m not sure what would be the difference in this case compare to an Object. I’ve created an example here so you can try it yourself.

Vue.js version: 2.1.0 Reproduction Link: https://github.com/xpepermint/vue-contextable-example Steps to reproduce: Run the example and play with the provided form. What is Expected?: The user model should be updated when input changes. What is actually happening?: The model is not updated.

[agm1984]

Thanks @yyx990803. I went through the documentation again and I found this paragraph:

Sometimes you may want to assign a number of properties to an existing object, for example using Object.assign() or _.extend(). However, new properties added to the object will not trigger changes. In such cases, create a fresh object with properties from both the original object and the mixin object.

This is exactly what the problem is. I’ll close this issue since I see how to solve it now. Thanks!

This solved my issue. I will show both to help show what he’s talking about:

This is problematic:

this.modifiedAccount.billing_city = newLocation.city;
this.modifiedAccount.billing_region = newLocation.region;

That is problematic because billing_city and billing_region were not keys on modifiedAccount, so they were basically not being watched, is how I interpret that.

This is a solution to that problem:

this.modifiedAccount = {
    ...this.modifiedAccount,
    billing_city: newLocation.city,
    billing_region: newLocation.region,
};

This overwrites modifiedAccount with a copy of itself plus the new keys spread in, which will be familiar to many people, as it is a common immutable approach.

Without testing, I am pretty sure this.modifiedAccount.billing_city = newLocation.city; would trigger a re-render after you did the above solution because Vue would then be watching those keys.

EDIT: I just tested and the component did re-render after I did the above solution and then did:

this.modifiedAccount.billing_city = 'poop';

[xpepermint]

Thanks @yyx990803. I went through the documentation again and I found this paragraph:

Sometimes you may want to assign a number of properties to an existing object, for example using Object.assign() or _.extend(). However, new properties added to the object will not trigger changes. In such cases, create a fresh object with properties from both the original object and the mixin object.

This is exactly what the problem is. I’ll close this issue since I see how to solve it now. Thanks!