I am using vue.js version 2 in a web project.

I know that reactivity has some constraints about adding new members to objects.

That said, I am working with a relatively plex data object that has a multitude of nested members, arrays of sub-objects and so on.

I am now using puted properties to get/set some of these members in specific ponents, and I am getting/setting those nested properties using lodadh _.set

For example: _.set(myObj, 'GeneralData.Body[0].MainAddress.StreetNumber')

My issue is that, apart from GeneralData, the remaining part could not exist and thus the whole thing is not reactive.

How can I achieve this in vue.js? I tried to use the $set function provided by vue.js but it creates a single nested property named 'GeneralData.Body[0].MainAddress.StreetNumber' (as a string) and not the object tree as the lodash function.

I am using vue.js version 2 in a web project.

I know that reactivity has some constraints about adding new members to objects.

That said, I am working with a relatively plex data object that has a multitude of nested members, arrays of sub-objects and so on.

I am now using puted properties to get/set some of these members in specific ponents, and I am getting/setting those nested properties using lodadh _.set

For example: _.set(myObj, 'GeneralData.Body[0].MainAddress.StreetNumber')

My issue is that, apart from GeneralData, the remaining part could not exist and thus the whole thing is not reactive.

How can I achieve this in vue.js? I tried to use the $set function provided by vue.js but it creates a single nested property named 'GeneralData.Body[0].MainAddress.StreetNumber' (as a string) and not the object tree as the lodash function.

• javascript
• vue.js

Share Improve this question Follow asked Dec 3, 2018 at 8:36 GenesioGenesio 19133 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

You can use _.setWith which lets you tell lodash what function to use to create props.

So, solution to your problem will be like:

_.setWith(myObj, 'GeneralData.Body[0].MainAddress.StreetNumber', 'somevalue', function(nsValue, key, nsObject){
 return Vue.set(nsObject, key, nsValue)
})

Reference:

https://lodash./docs/4.17.11#setWith

https://v2.vuejs/v2/api/#Vue-set

Assign your object to a variable first:

const objToDeploy = myObj

_.set(objToDeploy, 'GeneralData.Body[0].MainAddress.StreetNumber')

Then when you're done, assign that with Vue.set

Vue.set(this, 'myObj', objToDeploy)

You should know that work with these heavy nested data sets and reactive properties will cause an entire re-draw of the Virtual DOM because of how the Observable reactivity works in Vue. Therefore it is best to split your array of multi nested sub objects into their own Models where you don't have this issue.