使用 $set 在对象内追加数组（道具不会更新）

Question

我有一个对象，结构看起来像这样

obj: {
  1: {
    'a': [ [] ],
    'b': [ [] ]
  }
}

现在，在观察者中，我正在尝试将'c' => [ [] ] 附加到该对象。

• 我尝试使用this.obj[1]['c'] = [ [] ]，但是当我这样做时，它不会观察道具（子组件上）的变化。我几乎可以肯定我需要使用$set

• this.$set(this.obj, 1, { ['c']: [ [] ] }) - 使用它实际上会监视它，但是它会完全删除 'a' 和 'b' 属性。

• 使用this.$set(this.obj[1], ['c'], [ [] ]); - 似乎改变了对象，但是道具也不会看到这个

$set的正确使用方法是什么

Answer 1

如 cmets 中所述，只需使用

this.$set(this.obj['1'], 'c', [[]])

例如...

new Vue({
  el: '#app',
  data: {
    obj: {
      1: {
        'a': [ [] ],
        'b': [ [] ]
      }
    }
  },
  methods: {
    addC: function() {
      this.$set(this.obj['1'], 'c', [[]])
    }
  }
})

<div id="app">
  <p><button @click="addC">Add "c" property</button>
    <ul>
      <li v-for="(prop, key) in obj">
        {{ key }}
        <ul>
          <li v-for="(arr, letter) in prop">
            {{ letter }} - size: {{ arr.length }}
            <ul>
              <li v-for="(sub, idx) in arr">
                Index {{ idx }} - size: {{ sub.length }}
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
</div>
<script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>