Vuejs無法推送到嵌套數組

Question

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

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字段字段的排列等，試圖找到如何引用該數組。任何幫助將不勝感激！

Answer 1

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

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

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

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

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