Question

我有一个多维对象，如下所示：

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不会更改。

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

Answer 1

您是否在this.$forceUpdate();之后尝试this.$set？

组件prop不会在嵌套对象更改时更新DOM

1 个答案: