title: Vue form with add more buttons
body: <p>I am trying to convert a long form to use Vue so that it is more interactive.</p>
  <p>As a shortish example I have the following markup.</p>
  <pre><code>
  &lt;template&gt;
      &lt;form v-on:submit.prevent action=&quot;&quot; method=&quot;post&quot;&gt;
          &lt;div class=&quot;row no-gutter application-section-container&quot;&gt;
  
              &lt;div class=&quot;col-12 col-lg-4 application-section-category-sidebar&quot;&gt;
                  &lt;h3 id=&quot;profile&quot; class=&quot;application-section-header&quot;&gt;Profile&lt;/h3&gt;
                  &lt;small class=&quot;d-block application-section-info&quot;&gt;Please fill in your profile details.&lt;/small&gt;
                  &lt;small class=&quot;d-block application-section-requirements&quot;&gt;&lt;strong&gt;(All Fields Required)&lt;/strong&gt;&lt;/small&gt;
                  &lt;small class=&quot;d-block application-section-status&quot;&gt;&lt;strong&gt;Incomplete&lt;/strong&gt;&lt;/small&gt; 
              &lt;/div&gt;
  
              &lt;div class=&quot;col-12 col-lg-8&quot;&gt;
                  &lt;div class=&quot;application-section&quot; id=&quot;application-user-profile&quot;&gt;
  
                  &lt;div class=&quot;form-row&quot;&gt;
  
                      &lt;div class=&quot;col&quot;&gt;
                          &lt;label for=&quot;first_name&quot;&gt;First Name&lt;span class=&quot;required&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                          &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;first_name&quot; id=&quot;first_name&quot; placeholder=&quot;First Name&quot; autocomplete=&quot;given-name&quot; value=&quot;&quot; readonly v-model=&quot;first_name&quot;&gt;
                      &lt;/div&gt;
  
                      &lt;div class=&quot;col&quot;&gt;
                          &lt;label for=&quot;last_name&quot;&gt;Last Name&lt;span class=&quot;required&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                          &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;last_name&quot; id=&quot;last_name&quot; placeholder=&quot;Last Name&quot; autocomplete=&quot;family-name&quot; value=&quot;&quot; readonly v-model=&quot;last_name&quot;&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class=&quot;form-row&quot;&gt;
                      &lt;div class=&quot;col&quot;&gt;
                          &lt;label for=&quot;email&quot;&gt;Email Address&lt;span class=&quot;required&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                          &lt;input type=&quot;email&quot; class=&quot;form-control&quot; name=&quot;email&quot; id=&quot;email&quot; placeholder=&quot;john.doe@example.com&quot; autocomplete=&quot;email&quot; value=&quot;&quot; readonly v-model=&quot;email&quot;&gt;
                      &lt;/div&gt;
  
                      &lt;div class=&quot;col&quot;&gt;
                          &lt;label for=&quot;contact_number&quot;&gt;Contact Number&lt;span class=&quot;required&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                          &lt;input required type=&quot;tel&quot; class=&quot;form-control&quot; name=&quot;contact_number&quot; id=&quot;contact_number&quot; minlength=&quot;11&quot; maxlength=&quot;14&quot; autocomplete=&quot;tel&quot; value=&quot;&quot; v-model=&quot;contact_number&quot;&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class=&quot;form-row&quot;&gt;
  
                      &lt;div class=&quot;col-12 col-sm-6 col-md-4&quot;&gt;
                          &lt;label for=&quot;gender&quot;&gt;Gender&lt;span class=&quot;required&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                          &lt;select required name=&quot;gender&quot; id=&quot;gender&quot; class=&quot;form-control&quot; v-model=&quot;gender&quot;&gt;
                              &lt;option v-for=&quot;gender in genders&quot; v-bind:key=&quot;gender&quot; v-bind:value=&quot;gender&quot;&gt;{{ gender }}&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class=&quot;form-row&quot;&gt;
                      &lt;div class=&quot;col-12 mb-3&quot;&gt;
                          &lt;label for=&quot;profile_address_line_1&quot;&gt;Street Address&lt;span class=&quot;required&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                          &lt;input type=&quot;text&quot; class=&quot;form-control mb-2&quot; name=&quot;profile_address_line_1&quot; id=&quot;profile_address_line_1&quot; placeholder=&quot;Address, Line 1&quot; value=&quot;&quot; v-model=&quot;profile_address_line_1&quot;&gt;
                          &lt;input type=&quot;text&quot; class=&quot;form-control mb-2&quot; name=&quot;profile_address_line_2&quot; id=&quot;profile_address_line_2&quot; placeholder=&quot;Address, Line 2&quot; value=&quot;&quot; v-model=&quot;profile_address_line_2&quot;&gt;
                          &lt;input type=&quot;text&quot; class=&quot;form-control mb-2&quot; name=&quot;profile_address_line_3&quot; id=&quot;profile_address_line_3&quot; placeholder=&quot;Address, Line 3&quot; value=&quot;&quot; v-model=&quot;profile_address_line_3&quot;&gt;
                      &lt;/div&gt;
  
                      &lt;div class=&quot;col-6 col-sm-4 col-md-4 mb-3&quot;&gt;
                          &lt;label for=&quot;profile_town&quot;&gt;Town/City&lt;span class=&quot;required&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                          &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;profile_town&quot; id=&quot;profile_town&quot; value=&quot;&quot; v-model=&quot;profile_town&quot;&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;col-6 col-sm-4 col-md-4 mb-3&quot;&gt;
                          &lt;label for=&quot;profile_county&quot;&gt;Region/County&lt;span class=&quot;required&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                          &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;profile_county&quot; id=&quot;profile_county&quot; value=&quot;&quot; v-model=&quot;profile_county&quot;&gt; 
                      &lt;/div&gt;
                      &lt;div class=&quot;col-12 col-sm-4 col-md-4 mb-3&quot;&gt;
                          &lt;label for=&quot;profile_postcode&quot;&gt;Postcode&lt;span class=&quot;required&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                          &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;profile_postcode&quot; id=&quot;profile_postcode&quot; value=&quot;&quot; v-model=&quot;profile_postcode&quot;&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;col-12&quot;&gt;
                          &lt;label for=&quot;profile_country&quot;&gt;Country&lt;span class=&quot;required&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                          &lt;select class=&quot;form-control&quot; name=&quot;profile_country&quot; id=&quot;profile_country&quot; v-model=&quot;profile_country&quot;&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class=&quot;form-row&quot;&gt;
                      &lt;div class=&quot;col-12&quot;&gt;
                          &lt;div class=&quot;custom-control custom-checkbox&quot;&gt;
                              &lt;input class=&quot;custom-control-input profile_has_disability&quot; type=&quot;checkbox&quot; name=&quot;profile_has_disability&quot; value=&quot;&quot; id=&quot;profile_has_disability&quot; v-model=&quot;profile_has_disability&quot;&gt;
                              &lt;label class=&quot;custom-control-label&quot; for=&quot;profile_has_disability&quot;&gt;
                                  Do you have any disabilities?
                              &lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class=&quot;col-12 profile-disabilities-container&quot; v-if=&quot;profile_has_disability&quot;&gt;
                          &lt;label for=&quot;profile_disabilities&quot;&gt;Please state your disabilities:&lt;/label&gt;
                          &lt;textarea class=&quot;form-control&quot; name=&quot;profile_disabilities&quot; id=&quot;profile_disabilities&quot; rows=&quot;4&quot; v-model=&quot;profile_disabilities&quot;&gt;&lt;/textarea&gt;    
                          &lt;small&gt;*This will enable us to make any reasonable adjustments for candidates at interview stage&lt;/small&gt;
                      &lt;/div&gt;        
                  &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data(){
              return{
                  'genders': [
                      'Male',
                      'Female',
                      'Other',
                      'Prefer not to say'
                  ],
                  'first_name': null,
                  'last_name': null,
                  'email': null,
                  'contact_number': null,
                  'gender': null,
                  'profile_address_line_1': null,
                  'profile_address_line_2': null,
                  'profile_address_line_3': null,
                  'profile_town': null,
                  'profile_county': null,
                  'profile_postcode': null,
                  'profile_country': null,
                  'profile_has_disability': null,
                  'profile_disabilities': null,
              }
          },
          mounted() {
              this.getProfile();
          },
          methods:{
              getProfile(){
                  axios.get('/account/api/profile')
                      .then((response) =&gt; {
                          console.log(response.data);   
                          this.first_name = response.data.user.first_name;
                          this.last_name = response.data.user.last_name;
                          this.email = response.data.user.email;
                          this.contact_number = response.data.user.contact_number;
                          this.gender = response.data.user.gender;
                          this.profile_address_line_1 = response.data.user.profile_address_line_1;
                          this.profile_address_line_2 = response.data.user.profile_address_line_2;
                          this.profile_address_line_3 = response.data.user.profile_address_line_3;
                          this.profile_town = response.data.user.town;
                          this.profile_county = response.data.user.county;
                          this.profile_postcode = response.data.user.postcode;
                          this.profile_country = response.data.user.country;
                          this.profile_has_disability = response.data.user.has_disability;
                          this.profile_disabilities = response.data.user.disabilities;
                      }).catch((err) =&gt; {
                          console.log(err);
                      });
              }
          }
      }
  &lt;/script&gt;
  
  </code></pre>
  <p>Currently I am simply just binding variables and that gives me this:</p>
  <p><a href="https://i.stack.imgur.com/QHwex.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QHwex.png" alt="enter image description here" /></a></p>
  <p>This works pretty well but later down the form users would be able to add records like education details with an add row button.</p>
  <p>In the original version I was just looping through <code>$user-&gt;educationDetails</code> in the actual Blade file.</p>
  <p>In Vue is my best bet just to load these objects into a data property and loop through them with <code>v-for</code>?</p>
  <p>This would also mean I'd have to return the user as well as a few other related models.</p>
  <p>Should it be separated out, or could I just return the data at the same endpoint?</p>
  <p>Here is the original form I'm converting:</p>
  <p><a href="https://i.stack.imgur.com/F53kz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F53kz.png" alt="enter image description here" /></a></p>