Dynamically add rows to form using Vue.JS

Question

I'm trying to make a dynamic form using Vue. User clicks the add button and another row appears for them to add data. The problem is, i initially set only 1 row at first but , when i put the v-for on the div, 3 extra rows started appearing. I'm confused as to why that happened? Plus, nothing happen when i click the add button. Thanks.

Dynamic vue form

Componenet

<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> &nbsp;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> &nbsp;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.')
    }
}

Answer 1

Your data should be an array that contains objects as items. In your example, v-for directive iterate properties in one object.

data(){
      return{   
          users: [{
              username:'',
              password:'',
              email:'',
              phone:''
          }]
      }
    },