追加配列

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'], [ [] ]);を使用して

• は - のいずれか

コメントで述べたように$が

Answer 1

を設定し使用する適切な方法は何ですか、単に

を使用する小道具はこれを見ていませんが、オブジェクトを変更するように思えます例えば

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>