组件道具嵌套的对象不会更新DOM改变

我有一个多维的物体看起来是这样的：在我的根组件道具嵌套的对象不会更新DOM改变

obj: { 
    1: { 
    'a' => [ [] ], 
    'b' => [ [] ] 
    }, 
    2: { 
    'x' => [ [], [] ] 
    } 
}

我拥有它。我也有此对象的手表，和我相应地更新另一个对象...

new Vue({ 
    el: '#app', 
    data: { 
    obj: {}, 
    newObj: {} 
    }, 

    watch: { 
    obj: { 
     handler(obj) { 

    } 
    } 
    } 
})

我使用newObj为道具，并把它传递给一个组件来执行循环。

内部处理程序，如果我使用对象的第一级密钥进行更改，组件更新DOM的DOM。

handler(obj) { 
    this.$set(this.newObj, key, { 
     [innerKey]: [ [] ] 
    }); 
}

但是，如果我尝试更改二级密钥，组件不会更新DOM。

handler(obj) { 
    var key = 1; 
    var additions = ['a', 'b', 'c'] 

    // First try: 
    var scafold = this.newObj[key] 
    scafold[additions[i]] = [ [] ]; 
    this.newObj[key] = scafold; 

    // Second try: 
    this.$set(this.newObj[key], additions[i], [ [] ]); 
}

尽管如此，如果我检查VUE调试器，它显示为使用这两种方式想要的对象被更新，DOM不会改变。

正如我所说的，我相信它不会看内在的按键并对它做出反应。克服这个问题的正确方法是什么？

来源

2017-08-08 senty

你试过this.$forceUpdate();后this.$set？

来源

2017-08-08 03:02:06 Simon

我没有。但我刚才找到了解决方案。首先，我删除this.newObj [key]'，然后是'this $ set（this.transferForms，key，scalfold）'，它起作用 – senty

我建议不要使用''''''''''''''''''删除this.newObj [key]''因为它会导致性能下降。 '''this。$ forceUpdate（）'''专门用来解决你的问题，不妨试试看。 – Simon

我试过这个：$ forceUpdate here：https：//jsfiddle.net/Lp9nmxn9/15/，但是我不能让它在组件的情况下工作 – senty

组件道具嵌套的对象不会更新DOM改变

回答

相关问题