vue.js - 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>

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

Answer 1

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

您应该将相关字段传递给 addChild 方法，如下所示:

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

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

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