2017-07-03 129 views
0

關於堆棧溢出的第一個問題,我很抱歉,如果我在錯誤的地方問。 Vue新手,並試圖完成一個小型項目幾天。我簡化了它,但在這裏。我希望能夠根據需要輸入儘可能多的客戶名稱,然後能夠根據需要添加儘可能多的客戶的兒童姓名。因此,有一組嵌套的孩子的客戶。我可以讓客戶添加,但我無法弄清楚爲什麼我無法將新元素推入到孩子的陣列中。這是我的代碼。Vuejs無法推送到嵌套數組

new Vue ({ 
el: '#app', 
data: function() { 
    return { 
      formdata: [], 
      fields: [{ 
       name: '', 
       childs: [{ 
        cname: '', 
       }] 
      }], 
     }; 
    }, 
    methods: { 
     addRow: function() { 
      this.fields.push({ 
       name: "", 
       childs: [{ 
        cname:'', 
       }], 
      }); 
     }, 
     addChild: function() { 
      this.child.push({ 
      }); 
     }, 
    }, 
}); 

而且我的HTML

<div id="app"> 
    <button class="btn btn-success" @click="addRow">Add</button> 
    <div v-for="field in fields" > 
     <div class="input-group"> 
     <input type="text" placeholder="Name" class="form-control" v-model="field.name"> 
     </div> 
     <div v-for="child in field.childs" > 
     <div class="input-group"> 
      <input type="text" placeholder="Child" class="form-control" v-model="child.cname"> 
      <div class="input-group-btn"> 
      <button class="btn btn-success" @click="addChild">Add</button> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

再次,問題是,我可以推一個新的「名」到田間地頭陣列,但我不能推一個新的孩子到田裏子陣列。我一直在嘗試每個孩子childs字段字段的排列等,試圖找到如何引用該數組。任何幫助將不勝感激!

回答

0

在您的addChild方法中,您需要訪問相關fieldchilds屬性。目前,您正嘗試訪問Vue實例的childs屬性,該屬性不存在。

你應該在相關領域傳遞到addChild方法,像這樣:

<button class="btn btn-success" @click="addChild(field)">Add</button> 

,然後更新您的addChild方法來引用childs陣列field的傳入:

addChild: function(field) { 
    field.childs.push({}); 
} 
+0

感謝你這麼許多!這工作完美! – 7tacos