javascript - v-model 将动态添加的输入字段设置为 undefined

Question

要求用户添加列，给出与新列相关的名称和其他信息。我当前的问题是我可以看到添加到数组中的新列，但它们是未定义的。不确定我是否遗漏了什么或者我绑定的方式不正确..

看法：

 div(v-for='column in columns')
      .row
        label Name
        Input(type='text, v-model='model.name')
      .row
        label Age
        Input(type='text' v-model= 'model.age')
      ....
      button(@click='save()') Save
      button(@click='addColumn()') Add Column // this will add another set of inputs

VUE 代码：

model: ColumnModel = new ColumnModel();
column: ColumnModel;
columns: ColumnsModel[]=[]

beforeMount(){this.columns.push(this.column);}

addColumn() { this.columns.push(...this.columns)}

save() { api post passing in this.columns}

使用我目前拥有的 - 每次我添加一个新列时，我都会看到它添加到数组中，但添加的项目是未定义的，所以我的列数组的大小为 2 和 [0:undefined, 1:undefined]

Answer 1

你根本没有使用你的模型。我会这样做：不是绑定模型，而是绑定 column.name 和 column.age，这样您将直接更改该列。保存时，您将发送已更改的列。

 div(v-for='column in columns')
  .row
    label Name
    Input(type='text, v-model='column.name')
  .row
    label Age
    Input(type='text' v-model='column.age')

另外，我不确定您的 addColumn 函数是否正确，您不是在复制数组吗？