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>

同样，问题在于我可以推出一个新名称＆＃34;到fields数组，但我无法将一个新子项推送到fields子数组中。我一直在尝试子域字段等的每个排列，试图找到如何引用该数组。任何帮助将不胜感激！

Answer 1

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

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

addChild

然后更新您的<button class="btn btn-success" @click="addChild(field)">Add</button>方法，以引用传入的addChild的{{1}}数组：

childs

Vuejs无法推送到嵌套数组

1 个答案: