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

Question

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

這個 Grip 需要一些配置，例如，

   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 代碼產生任何影響，它不會是反應式的。

這是數組上的變異方法，它將觸發對 vue 實例變量的更改檢測。

• 推（）

• 流行音樂（）
• 轉移（）
• 取消移位（）
• 拼接（）
• 種類（）
• 撤銷（）