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

Question

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.

I am trying to implement it with two dimensional arrays but that is also not working, please suggest — Avinash
– Avinash, Commented Oct 5, 2017 at 2:35

Alexander · Accepted Answer · 2017-10-05 03:51:43Z

1

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/

answered Oct 5, 2017 at 3:51

Alexander

6583 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Avinash Over a year ago

Thanks @Alex . I'll carry on from hereafter.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related