0

关于这个问题的一点背景

我已经构建了一个自定义系统来自动监视来自 nosql 数据库的 JSON 的一些“存储”属性。除了对象的嵌套（出于此处未讨论的几个原因需要）之外，没有什么太复杂的了。

数据结构如下所示：

{
    store: {
        objA: {
            objB: {
                prop1: 'some value'
            }
        }
    }
}

但是，由于它是一个提供该存储属性的 nosql 数据库，因此objB在从数据库加载后可能不存在。

使用的模板示例

我有将道具直接绑定到该数据存储的自定义组件

<my-selector :value.sync="store.objA.objB.prop1">
</my-selector>

但是，当“objB”不存在时它会崩溃，通常的 javascript 错误说它无法获得未定义的“objB”，但这是正常的。

我正在尝试找到一种 vuejs 方法来为我准备数据。

想法

为了应对崩溃：

  • 在这种情况下，我不能使用 v-if 来屏蔽选择器。因为即使尚未设置数据也可以使用该选择器（例如：用于可选数据）。
  • 我可以修复从数据库中获取数据的“加载”函数，以便在将数据分配给数据存储之前初始化所需的属性（如 objB）。但是，这意味着我的初始 VueJS 数据对象也将包含这些必需的属性。如果找不到任何替代解决方案，我可能会使用它，但我认为这不是最简单的方法，因为我必须在分配之前修复任何传入数据。
  • 我的首选是创建一个指令（或模板中内置的任何其他东西），如果它们丢失，它将为我添加它们。

VueJS 总是评估绑定值

我想到了那个解决方案：

<my-selector v-autocreate="'store.objA.objB.prop1'" :value.sync="store.objA.objB.prop1">
</my-selector>

然而，指令绑定“v-autocreate”不会首先被拾取（用调试器检查）。我没有找到与指令或属性加载顺序相关的文档。

我还希望使用指令“bind”函数获取节点的所有绑定，以便不重复字符串，但似乎我们无法获取该信息（我习惯于敲除js，我们可以在其中选择分配的所有绑定到一个节点以表现不同）。

我想达到这个目标，但我不确定它是否可能（我需要类似 pre-bind / beforeBind 指令上的事件哈哈）：

<my-selector v-autocreate :value.sync="store.objA.objB.prop1">
</my-selector>

v-autocreate 将确保执行缺失属性的 vm.$set 。

4

1 回答 1

1

您可以创建一个方法来检查对象路径中的每个属性，如果它不存在则创建它，然后返回最后一个属性的值。

示例（未测试）：

get(object, path) {
    path = path.split('.')

    let index = 0
    const length = path.length
    let val
    while (object != null && index < length) {
        let key = path[index++]
        if(object[key] == null) {
            this.$set(object, key, {})
        }
        object = object[key]
    }
    return val
}

用法：

<my-selector :value="get(store,'objA.objB.prop1')">
</my-selector>

您可能对 lodash 的get函数感兴趣，这是代码示例所基于的。

https://github.com/lodash/lodash/blob/master/get.js

于 2018-05-13T22:06:40.307 回答