How to create nested text fields at runtime using a different v-model when a button is clicked

Question

I am new to vues. I am trying to create nested text fields at runtime on a button click event. Please check the jsfiddle link for a better understanding https://jsfiddle.net/avi_02/qLqvbjvx/

Suppose this is the way to understand the problem.

++ → It generates MainTextBox

+ → It generates SubTextBox

When I click ++, then a new one MainTextBoxgenerates a link +for SubTextBox But when I click +to create SubTextBox, then it is generated by everyone else MainTextBox.

I want to generate SubTextBoxfor relevant MainTextBoxonly for other main text fields. Follow the jsfiddle link for a visual understanding.

Answer 1

Each rowsMainneeds its own array of components.

addRowMain() {
  this.form.rowsMain.push({
    key: '',
    value: '',
    componentRows: []
  });
}

And then you can add component lines, for example:

addRowMainComponent(index) {
  this.form.rowsMain[index].componentRows.push('')
}

He still needs work, but check out this updated script:

https://jsfiddle.net/qLqvbjvx/5/