Question

关于问题的一点背景

我已经建立了一个自定义系统来自动观看一些＆＃34; store＆＃34;来自nosql数据库的JSON的属性。没有太复杂的事情，除了对象的嵌套（这里没有讨论的几个原因）。

数据结构如下所示：

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

但是，由于它是提供该商店属性的nosql数据库，因此在从数据库加载后， objB 就不会出现。

使用的模板示例

我有自定义组件，其中包含直接绑定到该数据存储的道具

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

然而，崩溃当＆＃34; objB＆＃34;没有通常的javascript错误，说它无法得到＆＃34; objB＆＃34;未定义，但这是正常的。

我试图找到一种为我准备数据的vuejs方法。

观

为了应对这次崩溃：

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

VueJS始终评估绑定值

我想到了那个解决方案：

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

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

我也希望得到一个节点的所有绑定与指令＆＃34; bind＆＃34; 函数是为了不重复字符串，但似乎我们无法得到那些信息（我已经习惯了敲门，我们可以选择分配给节点的所有绑定，以便表现不同）。

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

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

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

Answer 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

VueJS自动创建嵌套对象属性以简化代码

关于问题的一点背景

使用的模板示例

观

VueJS始终评估绑定值

1 个答案: