Vuejs 无法推送到嵌套数组答案

【问题标题】：Vuejs cannot push to nested arrayVuejs 无法推送到嵌套数组
【发布时间】：2017-12-07 02:30:58
【问题描述】：

关于堆栈溢出的第一个问题，如果我问错了地方，我深表歉意。 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>

同样，问题是我可以将新的“名称”推送到字段数组，但我不能将新的孩子推送到字段子数组中。我一直在尝试子子字段字段等的所有排列，试图找到如何引用该数组。任何帮助将不胜感激！

【问题讨论】：

标签： vue.js

【解决方案1】：

在您的addChild 方法中，您需要访问相关field 的childs 属性。目前，您正在尝试访问不存在的 Vue 实例的 childs 属性。

您应该像这样将相关字段传递给addChild 方法：

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

然后更新您的addChild 方法以引用传入的field 的childs 数组：

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

【讨论】：