On my form, I have an input field that allows users to click an add button and a new input field will appear below it, with the option to repeat this process indefinitely. However, I am facing an issue with adding an input field to the DOM upon a click event.
Initially, I considered using either ngFor or v-for (I am using both, so the solution can involve either). Upon clicking the add button, a counter is incremented and the value is added to an array. Through looping, the inputs are displayed.
let inputs = 0;
addInput() {
this.inputs++;
this.criteria.push(this.inputs);
}
<button @click.prevent='addInput'>Add input</button>
<input type='text' value='Default Input'>
<div v-for="input in inputs" v-bind:key="input">
<input type='text'>
</div>
The functionality is behaving as expected initially - a new input field appears upon clicking the button.
However, the issue arises when I add a second input, input a value, and then add a third input. The second input's value gets reset to blank.
How can I resolve this to ensure that values entered in previous inputs are retained while adding new inputs upon a click event?
Thank you.