javascript - Vue.js - 如何反应性地将“多级嵌套”成员添加到对象

Question

我在一个 web 项目中使用 vue.js 版本 2。

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

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

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

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

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

如何在 vue.js 中实现这一点？我尝试使用$setvue.js 提供的函数，但它创建了一个名为“GeneralData.Body[0].MainAddress.StreetNumber”（作为字符串）的嵌套属性，而不是作为 lodash 函数的对象树。

标签： javascriptvue.js

Answer 1

您可以使用_.setWithwhich 让您知道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