v-model to dynamically added input fields are set to undefined

Question

The user is requested to add columns giving a name and other information associated to the new column. My current issue is that i could see the new columns added into an array but they are undefined. Not sure if i am missing something or the way i am binding is not correct..

VIEW:

 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 Code:

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}

with what i currently have - everytime i add a new column i see it added to the array but the item added is undefined so my columns array would be size 2 and [0:undefined, 1:undefined]

score 0 · Answer 1 · answered Apr 18 '19 at 17:40

You are not using your model at all. I would do this: instead of binding the model, bind column.name and column.age, this way you will be changing that column directly. When you save you will send the already changed column.

 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')

Also, im not sure your addColumn function is correct, aren't you duplicating your array?

v-model to dynamically added input fields are set to undefined

1 Answers1