How to generate nested textboxes on runtime with different v-model on button click

user_2737885 0
Viewed 49

I am new to vuejs. I am trying to generate nested textboxes on run time on a button click event. Please check jsfiddle link for better understanding https://jsfiddle.net/avi_02/qLqvbjvx/

Let's assume like this to understand the problem.

++ -> It generate MainTextBox

+ -> It generate SubTextBox

When I click on ++ then a new MainTextBox generates with a + link for SubTextBox But when I click on + to generate a SubTextBox then it gets generated on all other MainTextBox.

I want to generate SubTextBox for respective MainTextBox only not for other main textboxes. Please follow jsfiddle link for visual understanding.

vue.js javascript
1 Answers

Each rowsMain needs its own array of components.

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

And then you could add the component rows like:

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

It still needs work, but see this updated fiddle:

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

user_32133080
Related