组件道具不会在嵌套对象更改时更新 DOM答案

【问题标题】：Component prop doesn't update DOM on nested object changes组件道具不会在嵌套对象更改时更新 DOM
【发布时间】：2018-01-15 09:47:52
【问题描述】：

我有一个看起来像这样的多维对象：

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

我的根目录中有它。我也有这个对象的手表，我正在相应地更新另一个对象......

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

  watch: {
    obj: {
      handler(obj) {

     }
    }
  }
})

我使用 newObj 作为 prop 并将其传递给组件以执行 for 循环。

在处理程序内部，如果我使用对对象的第一级键进行更改，则组件会更新 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 不会改变。

正如我所说，我相信它不会观察内部键并对其做出响应。克服这个问题的正确方法是什么？

【问题讨论】：

标签： javascript dom vue.js vuejs2 vue-component

【解决方案1】：

您在this.$set 之后尝试过this.$forceUpdate(); 吗？

【讨论】：

我没有。但我刚刚找到了解决方案。首先我做delete this.newObj[key] 然后this.$set(this.transferForms, key, scalfold) 并且它起作用了
我建议不要使用delete this.newObj[key]，因为它会导致已知的性能下降。 this.$forceUpdate() 是专门为解决您的问题而创建的，不妨尝试一下。
我在这里尝试了 this.$forceUpdate：jsfiddle.net/Lp9nmxn9/15，但我无法使其适用于组件案例
你的组件没有正确定义，props 是一个地图，所以应该看起来像{ props: { newObj: Array } }