there is a requirement to implement a dynamic form, which I implemented in this way
<template>
<div class="container">
<div class="form-gtoup">
<input type="text" name="" id=""><button @click="addItem">add</button>
</div>
<div class="form-gtoup" v-for="(item,index) in arr" :key="index">
<input type="text" name="" id=""><button @click="minusItem(index)">minus</button>
</div>
</div>
</template>
export default {
data() {
return {
arr:[]
};
},
methods: {
addItem () {
this.arr.push("")
},
minusItem (index){
this.arr.splice(index, 1)
} form can be generated dynamically by adding arr dynamically.
but if the completed input, deletes the form that fills out 2, the length of arr becomes 1, the form that fills 2 is still there, and the form that fills out 3 is missing, is there any good way to solve this problem?