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

Posted 2023-02-23

【中文标题】v-model 将动态添加的输入字段设置为 undefined

【英文标题】：v-model to dynamically added input fields are set to undefined

【发布时间】：2019-09-09 01:22:47

【问题描述】：

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

查看：

 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]

【参考方案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 函数是否正确，你不是在复制你的数组吗？