Question

我正在Web项目中使用vue.js版本2。

我知道反应性对于向对象添加新成员有一些限制。

也就是说，我正在使用一个相对复杂的数据对象，该对象具有大量的嵌套成员，子对象数组等。

我现在正在使用计算属性来获取/设置特定组件中的某些成员，并且正在使用lodadh _.set

获取/设置这些嵌套属性。

例如：_.set(myObj, 'GeneralData.Body[0].MainAddress.StreetNumber')

我的问题是，除了GeneralData之外，其余部分不存在，因此整个事物都没有反应性。

如何在vue.js中实现？我尝试使用vue.js提供的$set函数，但是它创建了一个名为'GeneralData.Body [0] .MainAddress.StreetNumber'（作为字符串）的嵌套属性，而不是 object tree < / em>作为lodash函数。

Answer 1

首先将对象分配给变量：

const objToDeploy = myObj

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

然后，完成操作后，将其分配给Vue.set

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

您应该知道，由于Observable反应性在Vue中的工作方式，使用这些繁重的嵌套数据集和反应性属性将导致整个虚拟DOM重新绘制。因此，最好将您的array of multi nested sub objects拆分成自己的Models，这样您就不会遇到这个问题。

Answer 2

您可以使用_.setWith来告诉lodash使用什么功能来创建道具。

因此，解决您的问题的方法将是：

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

参考：

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

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

Vue.js-如何向对象添加“多级嵌套”成员

2 个答案: