如何在VueJs中動態添加一組配置的模板？

Question

我使用VueJs來製作動態網格結構。

這種握法需要一定的一套類似的configs的，

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> 

我得到的輸出，

 1 
    2 

如果我增加 「K」 的價值，它的動態反映。

在我的情況下，我需要將一組配置傳遞給現有的列表。

的OnLoad，已定義列表中工作正常，但如果我嘗試注入（推或追加），那麼它將無法工作。

我試試，

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

輸出是，

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

在這裏，新添加的對象是從現有的完全不同。

兩者都是對象。

我需要對象的純追加。

處理好模板後，現有的設置顯示爲「Getter」爲什麼？

我的代碼有什麼問題？

是否有可能（通過只添加配置集）？

Answer 1

如果你的templates變量不是vue實例的一部分，改變它對vue代碼沒有任何影響，它不會被動。

Here是數組上的突變方法，它將觸發vue實例變量的變化檢測。

• 推（）
• 彈出（）
• 移（）
• 不印字（）
• 剪接（）
• 排序（）
• 反向（）