VueJS：动态更新数据中的变量

Question

我正在使用 VueJS 库从 JSON 模式生成表单，除了一个问题，如果我直接从 data() 加载 JSON I可以完美的看到表单内容： https://codepen.io/eran-levi/pen/wvGVBGJ

（这里是 data() 里面的 Schema JSON）：

schema: {
    type: 'object',
    properties: {
        stringProp: {
            type: 'string',
            title: 'I\'m a string',
            description: 'This description is used as a help message.'
        }
    }
}

但是，一旦我尝试动态加载它（我正在加载数据然后才更新它），在这种情况下我在页面上看不到任何内容，请在此处查看： https://codepen.io/eran-levi/pen/WNwVbGZ

（这是我尝试更新字段的方式）：

created() {
    setTimeout(function(){ 
        console.log('Component has been created!');
                    
        this.schema.properties.stringProp = {
            type: 'string',
            title: 'I\'m a string',
            description: 'This description is used as a help message.',
        }                        
    }, 3000); 
}

你能解释一下为什么我不能动态更新字段并立即看到吗？

谢谢！

Answer 1

在第二个示例中，您在创建挂钩后忘记了逗号，并且像第一个示例一样更新了 properties 而不是 properties.stringProp。要更新 properties.stringProp，您需要先将其设置为 null。

schema: {
    type: "object",
    properties: { stringProp: null },
},

updateScheme() {
    this.schema.properties.stringProp = {
        type: 'string',
        title: 'I\'m a string',
        description: 'This description is used as a help message.',
    }
}

Answer 2

这是由于 Vue 反应性的工作方式。属性 type、title 和 description 不会是反应式的，因为当实例首次初始化并且它遍历 schema 对象并包装它时，它们不存在使其对变化做出反应。 Vue 无法检测属性添加或删除 - 可以找到更多相关信息 here.

要让它发挥作用，您有两种选择。你可以像下面这样使用 Vue.set，这会告诉 Vue 有一个新的属性需要被设置为响应式的。看起来像这样：

setTimeout(function() {
    this.$set(this.schema.properties, 'stringProp', {
        type: 'string',
        title: 'I\'m a string',
        description: 'This description is used as a help message.',
    });
}.bind(this), 3000);

或者，您可以更改初始声明以包含您需要的属性。这意味着您的初始数据将如下所示：

data: {
    model,
    options,
    schema: {
        type: 'object',
        properties: {
            stringProp: { type: null, title: null, description: null },
        },
    },
}

VueJS：动态更新数据中的变量

VueJS: update variable in data dynamically

jsonschema

vue.js