v-модель для динамически добавленных полей ввода установлена ​​в неопределенное

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:не определено]

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 правильная, вы не дублируете свой массив?