VueJsに一連のconfigsを動的に追加する方法は？

Question

私は動的グリッド構造を作るためにVueJsを使います。私がしようとした場合

このグリップは、ここのようなコンフィグのいくつかのセット、テンプレートの

var sets = { 
      "nb": 3, 
      "column": 4, 
      "list": false, 
      "action_text": "Action 0", 
     }; 

    var templates = [{ 
      "nb": 2, 
      "column": 3, 
      "list": false, 
      "action_text": "Action 0", 
     }, 
     { 
      "nb": 1, 
      "column": 2, 
      "list": false, 
      "action_text": "Action 0", 
     }]; 

マイVueJsされ、

Vue.component('campaign_segment', { 
    template: '#segment_body', 
    props: ['t_nb', 't_column', 't_show_list', 't_action_text'], 

    data: function() { 
     return { 
      n: templates, 
      nb: this.t_nb, 
      column: this.t_column 
      } 
     } 
    } 

マイテンプレートスケルトンがあり、

<div v-for="(te,index) in templates" class="row"> 
    <campaign_segment :t_nb="te.nb" :t_column=te.column :t_show_list="te.list" 
         :t_action_text="te.action_text"> 
    </campaign_segment> 
    </div> 

が必要このように、

var k = 3; 

    <div v-for="n in k class="row"> 
    <p> {{ n }} </p> 
    </div> 

私は私が "K" の値を大きくした場合、そのが動的に反映

 1 
    2 

、などの出力を取得します。

私の場合、私は既存のリストに設定のセットを渡す必要があります。

OnLoad、定義済みリストは正常に動作しますが、注入（プッシュまたはアペンド）しようとすると機能しません。

templates[2] = dummy_segment; 
    console.log(templates); 

出力がある

私がしようと、ここで

Object { 0: Getter, 1: Getter, 2: Object, 1 more… } 

は、新しく追加されたオブジェクトは、既存のとは全く異なるものです。

どちらもオブジェクトです。

純粋なオブジェクトの追加が必要です。

処理テンプレートの後、既存のセットは「ゲッター」として表示されます。なぜですか？

私のコードで何が問題になっていますか？

（設定を追加するだけで）可能ですか？

Answer 1

templates変数がvueインスタンスの一部でない場合、これを変更してもvueコードには影響しません。これは無効になりません。

Hereは、vueインスタンス変数の変更検出をトリガーするarrayの突然変異メソッドです。

• プッシュ（）
• ポップ（）
• シフト（）
• 抜き（）
• スプライス（）
• ソート（）
• 逆（）