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函数是否正确，是否不复制数组？

将动态添加的输入字段的v模型设置为未定义

1 个答案: