title: Dynamically add rows to form using Vue.JS
body: <p>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.</p>
  
  <p>Dynamic vue form
  <a href="https://i.stack.imgur.com/VNLtR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VNLtR.jpg" alt="enter image description here"></a>
  <br><br>
  <strong>Componenet</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;title&gt;exportDATA | Web to Excel&lt;/title&gt;
  &lt;div class="mt-4"&gt;
          &lt;div class="jumbotron bg-dark col-md-10 offset-md-1"&gt;
                  &lt;div class="card card-body bg-dark" v-for="(user,index) in users" :key="index"&gt;
                     &lt;form&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="form-group col-md-3"&gt;
                                  &lt;label for="email" class="text-white"&gt;Username:&lt;/label&gt;
                                  &lt;input type="text" class="form-control" id="username" v-model="user.username"&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group col-md-3"&gt;
                                  &lt;label for="pwd" class="text-white"&gt;Password:&lt;/label&gt;
                                  &lt;input type="password" class="form-control" id="password" v-model="user.password"&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group col-md-3"&gt;
                                  &lt;label for="pwd" class="text-white"&gt;Phone Number:&lt;/label&gt;
                                  &lt;input type="text" class="form-control" id="phone" v-model="user.phone"&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group col-md-3"&gt;
                                  &lt;label for="pwd" class="text-white"&gt;Email&lt;/label&gt;
                                  &lt;input type="email" class="form-control" id="email" v-model="user.email"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;            
               &lt;br&gt;
                  &lt;button class="btn btn-secondary float-right" title="Click to add row"&gt;&lt;span class="fa fa-plus-square" @click="addMoreData(index)" v-show="index == users.length-1"&gt;&lt;/span&gt; &amp;nbsp;Add More Data&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div class="jumbotron bg-dark col-md-10 offset-md-1 "&gt;
              &lt;button class="btn btn-success col-md-6 offset-md-3 p-3"&gt;&lt;span class="fa fa-plus-square"&gt;&lt;/span&gt; &amp;nbsp;Export to Microsoft Excel&lt;/button&gt;
          &lt;/div&gt;            
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Script</strong></p>
  
  <pre><code>    export default {
      data(){
        return{   
            users:{
                username:'',
                password:'',
                email:'',
                phone:''
            }
        }
      },
      methods:{
          addMoreData(index){
              this.users.push({ 
                  username: '',
                  password:'',
                  email:'',
                  phone:''
                  });
          }
  
      },
      mounted() {
          console.log('Component mounted.')
      }
  }
  </code></pre>