I am currently working on creating a dynamic form using Vue. The concept is that when the user clicks the add button, another row will appear for them to input data. However, I encountered an issue where initially only 1 row was set up, but when I added the v-for attribute to the div, 3 extra rows started appearing. I'm puzzled as to why this occurred and also noticed that nothing happens when I click the add button. Any insights would be greatly appreciated. Thank you.
View the dynamic vue form image https://i.stack.imgur.com/VNLtR.jpg
Component
<div class="container">
<title>exportDATA | Web to Excel</title>
<div class="mt-4">
<div class="jumbotron bg-dark col-md-10 offset-md-1">
<div class="card card-body bg-dark" v-for="(user,index) in users" :key="index">
<form>
<div class="row">
<div class="form-group col-md-3">
<label for="email" class="text-white">Username:</label>
<input type="text" class="form-control" id="username" v-model="user.username">
</div>
<div class="form-group col-md-3">
<label for="pwd" class="text-white">Password:</label>
<input type="password" class="form-control" id="password" v-model="user.password">
</div>
<div class="form-group col-md-3">
<label for="pwd" class="text-white">Phone Number:</label>
<input type="text" class="form-control" id="phone" v-model="user.phone">
</div>
<div class="form-group col-md-3">
<label for="pwd" class="text-white">Email</label>
<input type="email" class="form-control" id="email" v-model="user.email">
</div>
</div>
</form>
</div>
<br>
<button class="btn btn-secondary float-right" title="Click to add row"><span class="fa fa-plus-square" @click="addMoreData(index)" v-show="index == users.length-1"></span> Add More Data</button>
</div>
<div class="jumbotron bg-dark col-md-10 offset-md-1 ">
<button class="btn btn-success col-md-6 offset-md-3 p-3"><span class="fa fa-plus-square"></span> Export to Microsoft Excel</button>
</div>
</div>
</div>
Script
export default {
data(){
return{
users:{
username:'',
password:'',
email:'',
phone:''
}
}
},
methods:{
addMoreData(index){
this.users.push({
username: '',
password:'',
email:'',
phone:''
});
}
},
mounted() {
console.log('Component mounted.')
}
}