Vuejs 无法推送到嵌套数组

Posted 2023-02-22

【中文标题】Vuejs 无法推送到嵌套数组

【英文标题】：Vuejs cannot push to nested array

【发布时间】：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>

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

【参考方案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();